bootstrap3的img-thunbnail和img-responsive

最新推荐文章于 2023-07-26 17:31:36 发布

转载最新推荐文章于 2023-07-26 17:31:36 发布 · 6.8k 阅读

本文介绍如何使用 Bootstrap 3 中的 .img-responsive 类实现图片的响应式布局，使其能够根据屏幕尺寸进行适配。同时展示了不同样式类如 .img-rounded 和 .img-thumbnail 的应用效果。

bootstrap3 img img-thumbnail img-respinsive

新增的img-responsive

3.2版本 3.0版本

`.img-polaroid`	`.img-thumbnail`

响应式图片

通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

图片

为<img>元素增加不同的class，就可以轻松的改变其样式。

跨浏览器兼容性

你要知道，Internet Explorer 8是不支持圆角矩形的。

140x140 140x140

代码：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script type="text/javascript" src="dist/js/jquery.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>
<body style="margin:200px;">
<div style="width:980px; height:999px;">
<img src="images/1.jpg" alt="这个是img-rounded" class="img-rounded img-responsive" />
<img src="images/2.jpg" alt="这个是img-circle" class="img-circle img-responsive" />
<img src="images/3.jpg" alt="这个是img-thumbnail" class="img-thumbnail img-responsive" />
</div>
</body>
</html>