# Bootstrap 图片类

图片作为前端展示的主要主题之一，Bootstrap也为其准备了一些预设样式，不过相比于之前网格系统的内容，Bootstrap预设的图片类简单易懂，也不多。

# 默认样式 img 标签

直接上源码

  img{
    vertical-align: middle;
    border-style: none;
  }

vertical-align 属性，可用于设置元素的垂直对齐方式，设置为middle，将图片放置在父元素的中部，起到垂直居中的作用

border-style 属性，用于设置边框样式，将其设置为none，取消样式

# 响应式图片 .img-fluid

作为一款具备响应式布局能力的框架，Bootstrap也为图片提供了图片响应式的样式预设，通过类 img-fluid实现

上源码：

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

通过设置百分比最大宽度以及自动高度，来实现图片随视口大小的变换而变化。

# 缩略图功能 .img-thumbnail

为图片添加一个圆角外边框，且限制图片的大小最大为父元素的100%，使其有缩略图的效果

源码：

.img-thumbnail{
	padding: .25rem;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius： .25rem;
	max-width: 100%;
	height: auto;
}

padding——内边距、会撑开元素，但不会让元素内的内容变形

background-color——背景色也会作用域内边距中，这里设置背景色是填充了内边距里的颜色

border——设置边框

border-radius——设置边框的圆角

# 圆角图片

在Bootstrap3中，可以使用**.img-rounded**为图片添加圆角，但是在Bootstrap4中，该类被移除

所有的圆角全部统一为了 .rounded 类

.rounded{
	border-radius: .25rem !important
}

同时，在Bootstrap3中的 .img-circle 将图片设置为圆形，在Bootstrap4中，被 .rounded-circle 取代

.rounded-circle{
	border-radius: 50% !important
}