如何用css实现元素固定宽高比？

一、img、video 可替换元素的固定宽高比实现原理

指定img、video的宽度或者高度，另一边设置auto自动计算。比较简单。

html：

<div class="img-wrapper"><img src="" alt="">
</div>

css：

.img-wrapper {width: 50%;
}
img {width: 100%;height: auto;
}

二、普通元素固定宽高比实现原理：

利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。
比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16 可以得到 56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。也可以使用calc函数来实现自动计算：calc(100%*9/16)。
不过这种方式不灵活，只能够高度随着宽度变。CSS 工作组现在正在引入一种新的方案aspect-ratio，可以很方便地指定宽高比，不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

html：

<div class="box"><div class="scale"><div class="item">这是一个16：9的矩形</div></div>
</div>

CSS：

* {margin: 0;padding: 0;/* 清除默认样式 */}.box {width: 50%;/* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */}.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}.item {width: 100%;height: 100%;background-color: pink;position: absolute;}

三、如果想要实现固定比例的img，但是img本身尺寸并不是我们想要的比例，那么可以通过设置background属性来填充盒子。

但是这种方式下，图片想要不变形，需要设置cover属性哦，但是这样同时有个缺陷，就是，图片不能显示完整。background: url() no-repeat center center/cover;

html：

<div class="box"><div class="img-wrapper"></div>
</div>

css：

* {margin: 0;padding: 0;/* 清除默认样式 */}.box {width: 50%;/* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */}.img-wrapper {width: 100%;background: url() no-repeat center center/cover;padding-bottom: 56.25%;height: 0;}img {width: 100%;height: auto;}

如何用css实现元素固定宽高比？相关推荐

CSS实现元素固定宽高比
概要最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况,简而言之就是元素的宽度是随浏览器而变化,元素的高度是随元素的宽度变化的. 实现方式一:使用aspect-rat ...
html图片固定高宽比显示,科技常识：CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法的相关资料,希望小伙伴们看 ...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
Android中如何使控件保持固定宽高比
目录 1.自定义view 2.adjustViewBounds 3.百分比布局 4.ConstraintLayout 我们在android开发过程中可能会遇到一种情况,一个组件需要保持固定的宽高比,但 ...
android 怎么固定控件,Android中如何使控件保持固定宽高比
我们在android开发过程中可能会遇到一种情况,一个组件需要保持固定的宽高比,但是组件本身大小却不定.尤其在android屏幕碎片化的情况下,很多时候我们需要让一个组件宽度与屏幕宽度一致,这样就无法 ...
如何使用纯CSS实现固定宽高比div？
在很多场景下,我们都需要一个固定长宽比的div作为容器.直接使用js动态设置固然可行,但在页面大小变化时就不得不通过触发onresize事件来动态设置,十分不便.此文旨在于探讨使用纯CSS实现固定长宽 ...
android按钮固定尺寸,如何在android中保持按钮的固定宽高比
我正在改进你的XML.我没有测试它,但它应该工作.建议的更改是,而不是将图像设置为背景,将其设置为ImageButtons的src.此外,如果您坚持使用Button,则可以使用其他布局包装每个按钮,并 ...
css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...

如何用css实现元素固定宽高比？

如何用css实现元素固定宽高比？

如何用css实现元素固定宽高比？相关推荐

最新文章

热门文章