html图片调整宽度自动调整高度,利用css如何控制图片高度根据自适应宽度进行调整【原创】...

在手机页面中，图片的尺寸需要根据手机的屏幕大小自适应宽高，当使用js获取图片宽度赋予图片高度时，最初进入手机页面时，图片高度会发生明显的变化，用户体验不好。因此，使用css控制图片的高度是一个更好的选择。

以正方形图片为例：

html代码如下：

css代码如下：

.img{

width:25%;

height: 0;

padding-top:25%;

margin:10px;

background-color: #fff;

background-image:url("../img1/attention-img.png");

background-size: 100%;

}

代码讲解：

将图片作为背景图像插入到页面中，根据动态变化的width值，相应的设置padding-top值或者padding-bottom值。

运行以上代码，在页面中显示的是宽高为手机屏幕宽度的25%的正方形图片。

如此一来，手机页面中的图片能够根据手机屏幕的宽度动态改变图片高度，且进入页面时图片高度不会出现明显的跳跃性。相对于js获取图片宽度确定图片高度来说，用户体验会更好。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/22425.html

微信打赏

支付宝打赏

感谢您对作者aimee123的打赏，我们会更加努力！    如果您想成为作者，请点我