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

Question

所以我的问题是我有 3 张宽度不均匀的图像，但在达到一定宽度（比方说 767 像素）之前它们仍然完好无损。当它达到该宽度时，每个图像将占用 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

全局为所有图像提供响应宽度的一种方法是将其写入 css 文件或 body 标记中的内联样式：

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

css 文件中的其他方式是：

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

您也可以将 % 更改为较低的值，也可以调整百分比，直到您得到所需的百分比。

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

Answer 2

如果您使用 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>

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

how to do a Responsive images in a list with inline-block

html

css

twitter-bootstrap

twitter-bootstrap-4

responsive-images