html - 使用之前和之后的可调图像

我有一个li，在它上面加了“before”，然后在里面放了一个图像，很好，但是放大和缩小时图像的大小没有变化，可能是因为“position:absolute”。
它也没有响应，我应该使用媒体查询吗？
当前代码为：

.abc {
  border: 1px solid black;
  width: 25%;
  height: 130px;
}

.abc::before {
  width: 120px;
  content: " ";
  background-image: url(arr1.png);
  background-size: 70% 70%;
  background-position: 0%;
  background-repeat: no-repeat;
  position: absolute;
  left: 36%;
  top: 52%;
  height: 11%;
}

<ul>
  <li class="abc">
    <p>Heading Item</p>
  </li>
</ul>

最佳答案

根据你的代码，你没有一个“div”u have<li>和设置背景图像的类。也不清楚你真正想要达到什么，但如果你想有一个反应灵敏的形象，这不是办法。
我建议看一下bootstrap文档，这可能是使任何响应都最简单的方法。
查看此示例以获取响应图像：

<div class="row">
<div class="col-xs-3">
    <a href="#" class="thumbnail">
         <img src="http://placehold.it/350x150" class="img-responsive">
    </a>
</div>
 <div class="col-xs-3">
    <a href="#" class="thumbnail">
         <img src="http://placehold.it/350x150" class="img-responsive">
    </a>
</div>
<div class="col-xs-3">
    <a href="#" class="thumbnail">
         <img src="http://placehold.it/350x150" class="img-responsive">
    </a>
</div>
 <div class="col-xs-3">
    <a href="#" class="thumbnail">
         <img src="http://placehold.it/350x150" class="img-responsive">
    </a>
</div>

https://jsfiddle.net/emilvr/9L5cqnn1/
更新：
为了使你的图像灵活的浏览器屏幕大小，添加到您的图像

.flexible-img {
   max-width: 100%;
   width: auto\9;
   height: auto;
}

关于html - 使用之前和之后的可调图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44253752/