最新消息:文章中包含代码时,请遵守代码高亮规范!

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

HTML+CSS Aimee 200浏览 0评论

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

以正方形图片为例:

html代码如下:

<div class="img"></div>

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获取图片宽度确定图片高度来说,用户体验会更好。

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22425.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者aimee123的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!