新增的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是不支持圆角矩形的。
代码:
<!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>
效果图: