bootstrap div 居中_Bootstrap的图片处理方法

最新推荐文章于 2023-09-09 21:50:42 发布

看见一车哈士奇

最新推荐文章于 2023-09-09 21:50:42 发布

阅读量862

点赞数

文章标签： bootstrap div 居中

本文链接：https://blog.csdn.net/weixin_42516882/article/details/112092206

版权

响应式图片 .img-fluid

在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap</title>
	<style>
		body {
    
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>
	<div class="container">
		<!-- 给图片添加.img-fluid样式 -->
		<div class="row">
			<img src="images/img_01.jpg" class="img-fluid" alt="">
		</div>
		<!-- 定义max-width: 100%、height:auto;样式 -->
		<div class="row">
			<img src="images/img_01.jpg" style="max-width: 100%;height:auto;" alt="">
		</div>
	</div>
</body>

</html>

缩略图处理 .img-thumbnail

可以使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式（你也可以使用系统提供的边隙间距方法，如.p-1再加上边框颜色定义达成）。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com

最低0.47元/天解锁文章

看见一车哈士奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap div 居中_Bootstrap的图片处理方法

响应式图片 .img-fluid在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name...
复制链接

扫一扫