bootstrap3的img-thunbnail和img-responsive

最新推荐文章于 2023-07-13 20:57:09 发布

依然那么楞

最新推荐文章于 2023-07-13 20:57:09 发布

阅读量1.4w

点赞数

文章标签： bootstrap3 img img-thumbnail img-respinsive

本文链接：https://blog.csdn.net/ling811/article/details/16944615

版权

新增的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

代码：

<!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>

效果图：

依然那么楞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap3的img-thunbnail和img-responsive

新增的img-responsive3.2版本 3.0版本.img-polaroid.img-thumbnail响应式图片通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了ma
复制链接

扫一扫