有时候用html和css进行开发的时候,特别是移动端的项目,一排有2个或3个item,需要跟着屏幕的宽来进行item的宽高进行等比例缩放;
怎么解决呢?废话少说
一般不把item的width和height不要写死。
以一行3 个来说
padding-bottom: 50%;
width:33.333%
height: 100%;
用padding- bottom来设置height的高度,
小白这里会有个坑(大佬忽略),因为高度不是实际高度,所以item里面的 img元素不会随着padding- bottom的高度来变化。
解决: 给item加个相对定位,这item中的img一个绝对定位 再给设置img的width:100% height:100%
.item {
width: 33.333%;
padding-bottom: 50%;
height: 100%;
position: relative;
}
.item>img {
padding: 4px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
这样就可实现根据窗口大小而缩放了
上图:
屏幕宽度1031px
311px
全部代码:
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" rel="stylesheet">
<style>
.box {
border: 1px red solid;
height: auto;
}
.item {
width: 33.333%;
padding-bottom: 50%;
height: 100%;
position: relative;
}
.item>img {
padding: 4px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box row">
<div class="col-4 item">
<img src="https://imgs.blazor.zone/images/Pic120.jpg" alt="">
</div>
<div class="col-4 item">
<img src="https://imgs.blazor.zone/images/Pic120.jpg" alt="">
</div>
<div class="col-4 item">
<img src="https://imgs.blazor.zone/images/Pic120.jpg" alt="">
</div>
<div class="col-4 item">
<img src="https://imgs.blazor.zone/images/Pic120.jpg" alt="">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
</body>
</html>
ps:我引用的bootstrap来布局的,也可以用flex;
pps:如有错误,请及时提醒,便于我修改🙏