bootstrap入门之Image图片显示

 

1.简介

 

让图片支持响应式行为（这样它们就不会超出父元素的范围）以及如何通过类（class）添加些许样式。

 

2.响应式图片

 

通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放。

<img src="./test.jpg" class="img-fluid" alt="IU">

 

主要样式：

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

• 可以看到宽度为父元素百分百，高度自动，但是宽高比不变

 

3.缩略图