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

Question

我有一个 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>

Answer 1

根据您的代码，您没有 <li> 的“div”与 abc在其上设置背景图像的类。也不清楚你真正想要实现什么，但如果你想要一个响应式图像，这不是方法。

我建议看一下 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;       
}