css设置盒子宽高比固定，高度随着宽度发生变化

第一种方法： css属性：aspect-ratio——盒子的宽高比；

1）它的属性值可为1； 1.2；0.2；1/2; 3/2; 2.2/3.2

2）当然也可以包一个calc(画蛇添足没必要)；

3）注意不能设置百分比，就算用calc包裹也没用

这个属性用着也比较简单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test-box{width: 100%;aspect-ratio: 8/1;background: red;}</style>
</head>
<body><div class="test-box"></div>
</body>
</html>

这个属性还可以用来做响应式

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {div {background: #9af; /* blue */}
}/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {div {background: #9ff;  /* cyan */}
}/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {div {background: #f9a; /* red */}
}

优点：
用着简单方便，不会增加多余dom
缺点：
兼容性比较差，除非你们不考虑老一点的版本；比如google浏览器版本要100+版本才支持，80就不支持

第二种方法：利用padding撑开盒子；原理：padding设置百分比的是基于盒子的宽度来计算的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test-box-container{position: relative;padding-top: 40%;width: 100%;}.test-box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: red;}</style>
</head>
<body><div class="test-box-container"><div class="test-box"></div></div>
</body>
</html>

优点：
没有啥兼容问题，可以放心使用
缺点：
每用一次就会添加一个冗余的dom盒子

css设置盒子宽高比固定，高度随着宽度发生变化相关推荐

css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
css 大图保持宽高比压缩,css 保持宽高比缩放
参考需求简介: 在大的div中放九个小div, 小div需要保持4:3的宽高比, 小div中会有图片, 图片按照4:3拉伸下图效果是div1:1 , 图片宽度100%, 高度自适应思路 1, 使 ...
关于css设置盒子模型，设置像素与实际像素不同的问题
关于css设置盒子模型,设置像素和实际像素不同的问题写网页时,发现自己网页设置盒子像素和实际用ps量的像素不同.盒子模型的margin和padding也对,网页的缩放也时100%,但就是不同. 分析 ...
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
css设置div背景图片大小，适应宽度
问题: 没有通过css设置背景图片大小时候,背景图按照真实图片大小展示,会出现超出或者过小情况,如下是图片width:1920px 超出页面设计的1320px,效果如下真实图片是这样的解决方法通 ...
CSS设置盒子容器(div)高度(height)始终为100%
前言有时需要让一个盒子容器的高度始终保持100%,无论怎么缩放浏览器高度始终不变.就像一些网站的侧边栏,但直接设置盒子容器的高度为100%是不起作用的. demo 如果想让一个元素的百分比高度he ...
html怎么设置图片宽高比,CSS力图像调整尺寸和保持高宽比
下面的解决方案将允许放大和缩小图像.,取决于父框的宽度. 所有图像都有一个固定宽度的父容器.只作示范用途..在生产中,这将是父框的宽度. 此解决方案告诉浏览器以最大可用宽度呈现图像,并将高度调整为该宽 ...
html背景置顶,css设置背景图片位置固定
先看下实例html> css背景图片固定 body{ background-image: url("https://picsum.photos/id/100/1080/1400&quo ...
css 设置页面与屏幕同样高度
因为html默认height为0 所以如果要设置页面与屏幕同高,就要设置为height:100%,然后再将body的height也设置100% html,body{height:100% } 例子: ...

css设置盒子宽高比固定，高度随着宽度发生变化

第一种方法： css属性：aspect-ratio——盒子的宽高比；

1）它的属性值可为1； 1.2；0.2；1/2; 3/2; 2.2/3.2

2）当然也可以包一个calc(画蛇添足没必要)；

3）注意不能设置百分比，就算用calc包裹也没用

这个属性还可以用来做响应式

第二种方法：利用padding撑开盒子；原理：padding设置百分比的是基于盒子的宽度来计算的

css设置盒子宽高比固定，高度随着宽度发生变化相关推荐

最新文章

热门文章