CSS情况照片固定不动宽高比自融入调剂的完成方

2021-03-17 08:12 jianzhan

<img>标识可使照片在维持宽高比不会改变的状况下全自动调剂。大家探讨的是div的情况照片完成固定不动宽高比自融入调剂的方式。这里的照片并不是< img>标识1样根据src引进,而是根据css的background-image: url('相对路径')完成。

完成情况照片固定不动宽高比放缩大家选用padding-top:(percentage)来完成,padding-top赋值百分比为相对包括块的宽度而定。
由于照片规格和显示屏尺寸不配对等缘故,将会会出現情况照片显示信息不彻底等状况,大家先用1个小的div来演试1下。

编码以下,限定1个div的最大宽度为750px,依据照片规格设置padding-top: 89%,这个百分比为高宽比/宽度。

无放缩时以下图

有放缩时的以下 


 

大家能够看出,在访问器对话框规格更改时,照片的宽高比沒有更改。

下面大家用网页页面的情况照片试试。编码,

留意编码中的background-size特性,大家给的特性值是cover,是把情况照片变大到合适元素器皿的规格,照片占比不会改变,会出現照片显示信息不全的状况。也有1个常常应用的值是background-size:100% 100% ,照片按器皿占比撑满,会致使照片形变。

大家运作后获得的結果及放缩后的結果以下所示,尽管照片显示信息不彻底,可是能够看到宽高比为不会改变的。

 


padding-top 能够用于情况照片固定不动宽高比放缩的缘故,是情况照片地区包括padding,因此padding不容易危害情况照片,假如还要在情况照片上加1些文本等,将会padding-top的方式就不可用了。

在这里提1下另外一种方式,大家能够在显示屏转变时,依据显示屏宽度显示信息不一样的情况照片,用css @media完成,

 
 

实际用法可参照:https://www.jb51.net/css/692648.html

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,感谢大伙儿对脚本制作之家的适用。