关于原生HTML+CSS div的高度随着宽度按比例缩放

最新推荐文章于 2024-03-15 15:23:32 发布

前端菜鸟啊辉

最新推荐文章于 2024-03-15 15:23:32 发布

阅读量1.7k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/Mr_xiaopang19/article/details/122611794

版权

有时候用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：如有错误，请及时提醒，便于我修改🙏

前端菜鸟啊辉

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于原生HTML+CSS div的高度随着宽度按比例缩放

有时候用html和css进行开发的时候，特别是移动端的项目，一排有2个或3个item，需要跟着屏幕的宽来进行item的宽高进行等比例缩放；怎么解决呢？废话少说一般不把item的width和height不要写死。以一行3 个来说 padding-bottom: 50%; width：33.333% height: 100%;用padding- bottom来设置height的高度，小白这里会有个坑（大佬忽略），因为高度不是实际高度，所以item里面的 img元素不会随着padding- bo
复制链接

扫一扫