bootstrap4 响应式图片和视频——迹忆客-ag捕鱼王app官网

使用 bootstrap4 样式化图像

图像在现代网页设计中非常常见。 因此，样式化图像并将其正确放置在网页上对于改善用户体验非常重要。

使用 bootstrap5 内置类，可以轻松设置图像样式，例如制作圆角或圆形图像，或赋予它们类似缩略图的效果。

图片效果如下

创建响应式图像和视频

使用 bootstrap5，可以使图像具有响应性。 只需将 .img-fluid 类添加到 标签即可。 该类主要应用样式 max-width:100%; 和 height: auto； 到图像，以便它很好地缩放以适合父级元素的大小 - 如果图像的宽度大于父级元素本身。 查看以下示例以了解其工作原理：

注意 ：在制作响应式布局时，要考虑使图像也具有响应性，否则如果图像宽度在任何情况下都大于父元素的宽度，它将溢出并可能破坏网页布局。

还可以使嵌入在网页中的视频或幻灯片具有响应性，而不会影响其原始纵横比。 为此，将任何嵌入元素（如