div或img照片高宽比随宽度自融入的方式

日期:2021-01-19 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

该方式关键用来做网站自融入的,另外能够完成撑起內容高宽比,防止照片载入后致使的网页页面翻转。

1、可使用js分辨照片的宽度获得实际标值以后,再来运用js设定照片的高宽比(这里就不实际为大伙儿细说了)。

运用js来完成有1个缺陷便是只能在网页页面更新的情况下才可以调剂照片的高宽比,不可以伴随着访问器的对话框尺寸转变来完成自融入。

2、我这次关键是用css来完成照片高宽比的自融入难题。

下面是所必须的编码

(这类方式是能够在照片上方竖直垂直居中展现文本的,假如不必须能够挑选最正下方更简约的编码)

<div class="box">
 <span>行内元素竖直垂直居中</span>
 <div class="img-box">
  <img src="123.jpg"/>
        </div>
</div>
.box{
 width: 50%;
 margin: 50px auto;
}
.img-box{
 width: 100%;
 position:relative;
 z-index:1;
}
.img-box img{
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 width:100%;
 margin:auto;
 z-index: ⑴;
 *zoom:1;
}
.img-box:before {
 content: "";
 display: inline-block;
 padding-bottom: 100%;
 width: 0.1px; /*务必要了解值,不然没法把高宽比撑起来*/
 vertical-align: middle;
}

1、这里关键为大伙儿表明的便是padding-bottom这个特性,当它的值为百分比的情况下,是按该元素的宽度来测算的。因此当设为100%的情况下,其高宽比就等于本身的宽度,产生1个正方形。自然,这个标值能够依据具体情再开展调剂。
2、其主次表明的便是大家引入的照片是根据肯定精准定位来合理布局的,这样才可以使照片追随其父元素的尺寸更改来完成自融入。

另外一种简约的方式便是立即在img的父元素上加padding-bottom就可以了

<div class="img-box">
 <img src="123.jpg"/>
</div>
.img-box{
 padding-bottom:100%;
}
.img-box img{
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 width:100%;
 margin:auto;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:iframe与window.onload怎样应用详解 返回下一篇:没有了