Question

我有一个li并且在它之前“应用”并在其中放置一个图像。它很好，但放大时图像大小不会改变，因为“position：absolute”可能会缩小图像尺寸。 / p>

如果我使用媒体查询，它也没有响应？

目前的代码是：

.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

根据您的代码，您没有“div”，因为<li>类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;       
}

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

1 个答案: