Bootstrap 4 如何使“媒体对象”响应

Posted 2023-03-06

【中文标题】Bootstrap 4 如何使“媒体对象”响应

【英文标题】：Bootstrap 4 how to make 'media object' responsive

【发布时间】：2021-07-07 21:34:09

【问题描述】：

我有一个媒体对象，所以我可以有一个旁边有一些文字的图像，它可以在大屏幕上工作。当我进入较小的屏幕时，问题就出现了，文本被推到屏幕上，图像的大小略有不同，有些会稍微向左或向右移动。

<div class="container">
    <ul class="list-unstyled">
      <li class="media">
        <img
          src="image.jpg"
          class="align-self-center mr-3"
          
          style="width: 277.5px; height: 220px"
        />
        <div class="media-body">
          <h5 class="mt-0">Suspendisse potenti. Quisque mattis.</h5>
          <p class="pb-5">
            Mauris tincidunt pellentesque risus, accumsan.
          </p>
          <p>1 hour • $9999</p>
        </div>
      </li>

      <li class="media my-4">
        <img
          src="images.jpg"
          class="align-self-center mr-3"
          
          style="width: 277.5px; height: 220px"
        />
        <div class="media-body">
          <h5 class="mt-0 mb-1 align-self-center">
            Sed congue rhoncus interdum.
          </h5>
          <p class="pb-5">
            Ut euismod erat eget pharetra.
          </p>
          <p>1 hour • $9999</p>
        </div>
      </li>
    </ul>
  </div>

我正在处理这样的事情，还有大约 4 张图片。有没有办法通过引导程序本身或通过媒体查询，我可以在小屏幕上将图像缩小到大约 50 像素 x 50 像素？

提前感谢您的帮助。 :)

【参考方案1】：

您可以使用 image-fluid 类作为您的图像。如documentation所示。

<img src="..." class="img-fluid" alt="Responsive image">

【讨论】：

这对我没有任何作用。如果我在 pc 上缩小视口看起来很好，但是当我在移动设备上查看它时，它仍然会因为每秒钟图像变宽而变得混乱。我什至尝试向img-fluid 添加一些媒体查询，但仍然没有。