Question

所以我的问题是我有3幅宽度不均匀的图像，并且仍然保持完整，直到它达到一定的宽度，让我们说767px。当它达到该宽度时，每个图像将采用767px的全宽，直到xs大小的屏幕。对不起，如果这句话让你疯狂。

这里有一块

<div class= "about-content">

                    <ul>

                        <li><a href="">
                            <div class = "inner-content">

                                <img src="img/about/1.jpg" class="img-fluid">
                            </div>


                                </a></li><li><a href="">
                                <div class = "inner-content">
                                    <img src="img/about/2.jpg" class="img-fluid">
                                        <div class = "overlay-content">
                                            <h4>Book a Test Drive <i class = "fa fa-chevron-circle-right"></i></h4>                                 
                                        </div>
                                </div>


                                </a></li><li><a href=""><img src="img/about/3.jpg" class="img-fluid"></a></li>

                    </ul>
                    <ul>

                                <li><a href=""><img src="img/about/4.jpg">

                                </a></li><li><a href=""><img src="img/about/5.jpg">

                                </a></li><li><a href=""><img src="img/about/6.jpg"></a></li>

                    </ul>

                </div>

Answer 1

如果使用vw（视口宽度）测量，图像将会扩展。设置计算以补偿其在width: calc(100vw - 70px)

中的起始定位

这是一个片段：

img {
  width: 200px;
  height: 50px;
}

@media screen and (min-width: 767px) {
  img {
    width: calc(100vw - 70px);
  }
}

<div class="about-content">

  <ul>

    <li>
      <a href="">
        <div class="inner-content">

          <img src="img/about/1.jpg" class="img-fluid">
        </div>


      </a>
    </li>
    <li>
      <a href="">
        <div class="inner-content">
          <img src="img/about/2.jpg" class="img-fluid">
          <div class="overlay-content">
            <h4>Book a Test Drive <i class="fa fa-chevron-circle-right"></i></h4>
          </div>
        </div>


      </a>
    </li>
    <li>
      <a href=""><img src="img/about/3.jpg" class="img-fluid"></a>
    </li>

  </ul>
  <ul>

    <li>
      <a href=""><img src="img/about/4.jpg">

      </a>
    </li>
    <li>
      <a href=""><img src="img/about/5.jpg">

      </a>
    </li>
    <li>
      <a href=""><img src="img/about/6.jpg"></a>
    </li>

  </ul>

</div>

Answer 2

一种全局地为所有图像提供响应宽度的方法是在你的css文件或body标签中的内联样式中写这个：

<body style="img{width:100%;height:auto;}">

css文件中的其他方式是：

img
{
width: 100%;
height: auto;
}

你也可以将%改为降低，只需按百分比玩，直到你得到它的方式。

理想情况下，您还应该阅读@media queries

如何使用内联块在列表中执行响应式图像

2 个答案: