【Bootstrap】008-全局样式：图片
【Bootstrap】008-全局样式：图片
訾博ZiBo
发布于 2025-01-06 15:48:52
发布于 2025-01-06 15:48:52
代码可运行
运行总次数：0
代码可运行
一、响应式图片
1、说明
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放；
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。 请参考助手类章节 了解更多关于 .center-block 的用法；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
</head>
<body>
<img src="../img/1.jpg" class="img-responsive" alt="Responsive image">
</body>
</html>运行结果：
二、图片形状
1、说明
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状；
2、演示
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title></title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<style>
img{
width: 10%;
}
</style>
</head>
<body>
<img src="../img/1.jpg" alt="1" class="img-rounded">
<img src="../img/1.jpg" alt="2" class="img-circle">
<img src="../img/1.jpg" alt="3" class="img-thumbnail">
</body>
</html>运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
