Bootstrap 4是一个流行的前端框架，它提供了许多有用的工具来创建美观且响应式的网页。其中一个关键功能是图片填充，它允许你创建填充图片，无论容器大小如何变化，图片都会保持其原始的比例。

图片填充类

Bootstrap 4提供了几个类来帮助实现图片填充效果：

• .img-fluid: 使图片宽度适应其父元素，高度保持图片原始比例。
• .img-responsive: 使图片宽度适应其父元素，高度保持图片原始比例，并且图片会在容器中居中显示。
• .img-rounded, .img-circle, .img-thumbnail: 分别用于创建圆角、圆形和缩略图效果的图片。

实现图片填充

以下是如何使用.img-fluid和.img-responsive类来实现图片填充的步骤：

HTML结构

<div class="container">
  <img src="path-to-your-image.jpg" class="img-fluid img-responsive" alt="Responsive image">
</div>

CSS样式

Bootstrap 4默认已经包含了.img-fluid和.img-responsive类的样式。如果你需要自定义这些样式，可以添加以下CSS：

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

响应式布局

Bootstrap 4的栅格系统允许你创建响应式布局。要使图片在响应式容器中填充，可以使用以下方法：

使用栅格系统

<div class="row">
  <div class="col-12 col-md-8 col-lg-6">
    <img src="path-to-your-image.jpg" class="img-fluid img-responsive" alt="Responsive image">
  </div>
</div>

在上面的例子中，.col-12 col-md-8 col-lg-6类确保图片在不同屏幕尺寸下都有合适的宽度。

图片居中

如果你想要图片在容器中居中显示，可以使用.center-block类：

<div class="container">
  <img src="path-to-your-image.jpg" class="img-fluid img-responsive center-block" alt="Responsive image">
</div>

自适应图片大小

如果你想让图片在容器中自适应大小，同时保持其比例，可以使用.img-fluid类：

<div class="container">
  <img src="path-to-your-image.jpg" class="img-fluid" alt="Responsive image">
</div>

Bootstrap 4的图片填充技巧可以帮助你轻松创建美观且响应式的图片布局。通过使用.img-fluid和.img-responsive类，你可以确保图片在不同设备上都有良好的显示效果。