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

Question

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

<div class="container">
    <ul class="list-unstyled">
      <li class="media">
        <img
          src="image.jpg"
          class="align-self-center mr-3"
          alt="..."
          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"
          alt="..."
          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 像素？

提前感谢您的帮助。 :)

Answer 1

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

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