Bootstrap3 图片（响应式图片&图片形状）

下面是对“Bootstrap3 图片（响应式图片&图片形状）”的完整攻略。

响应式图片

Bootstrap提供了一种响应式图片的解决方案。响应式图片允许你的图片适应各种屏幕尺寸和设备类型，确保您的网站在任何设备下都能获得出色的用户体验。

实现思路

实现响应式图片的基本思路就是根据不同屏幕尺寸使用不同大小的图片。

1. 使用<img>标签的class属性添加.img-responsive样式，来使图片响应。
2. 在HTML图片<img>标签属性中设置srcset和sizes属性，以便根据屏幕大小显示不同图片。

代码示例

<!--使用class来实现响应式图片-->
<img src="img/sample.jpg" class="img-responsive" alt="Sample Image">

<!--在图片标签属性中设置srcset和sizes来控制图片显示-->
<img src="img/sample-large.jpg"
     srcset="img/sample-medium.jpg 1200w, img/sample-small.jpg 600w"
     sizes="(min-width: 1200px) 900px, (min-width: 480px) 90vw, 100vw"
     alt="Sample Image">

图片形状

Bootstrap提供了几种不同的形状类来控制图片的外观，这些类可以应用于<img>元素、以及<a>和.thumbnail元素。

实现思路

使用图片形状类的基本思路是使用<span>标签来包含<img>标签，然后添加对应的样式类。

1. 使用.img-rounded类来添加圆角效果。
2. 使用.img-circle类来添加圆形效果。
3. 使用.img-thumbnail来添加缩略图效果。

代码示例

<!--圆角形状-->
<span class="img-rounded">
    <img src="img/sample.jpg" alt="Sample Image">
</span>

<!--圆形形状-->
<span class="img-circle">
    <img src="img/sample.jpg" alt="Sample Image">
</span>

<!--缩略图形状-->
<span class="img-thumbnail">
    <img src="img/sample.jpg" alt="Sample Image">
</span>

以上就是“Bootstrap3 图片（响应式图片&图片形状）”的完整攻略，希望能对你有所帮助。