html - 如何使用内联 block 在列表中制作响应式图像

Question

所以我的问题是我有 3 张宽度不均匀的图像，但在达到一定宽度(比方说 767 像素)之前它们仍然完好无损。当它达到该宽度时，每个图像将占用 767px 的完整宽度，直到 xs 屏幕大小。对不起，如果这个句子结构让你发疯。

这是一 block

<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(视口(viewport)宽度)测量，图像将会扩展。设置计算以补偿它们的起始位置，如 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>