自适应图片尺寸解决方案

图片的自适应解决方案

我们在移动端或者是PC端的时候,我们在做响应式的时候,图片经常需要用到响应式,为了保证图片能够完整显示出来,这里推荐一种百分比的设计思路,通过图片的比值来确定我们设置的百分比。
首先我们来看下几个场景
黑白课堂
黑白课堂
黑白课堂
例如京东这个列表,图片可以根据不同的屏幕尺寸来确定大小。京东它是通过改变图片的尺寸大小来设置,这种其实不太好,毕竟你要去计算总平面大小,这里我们不推荐,只是我们作为一个自适应的参考。

通过实践,我们可以通过 padding-bottom 来设置一个 占位值,这个占位值怎么计算呢,很简单,根据图片显示的大小比例(高/宽),例如;

  • 190x190px ,那么我们可以设置padding-bottom:100%,
  • 500x300px,,那么我们可以设置padding-bottom:60%

例子演示
黑白课堂
黑白课堂
将图片设置位绝对定位,然后宽高100%。

<div  class="img">
    <img  src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/182679/14/9324/388107/60c8ddabEced0a479/11ff036209cabb57.jpg!q70.dpg.webp" alt="">
</div>
.img{
    padding-bottom: 100%;
    position: relative;
}
img{
    width: 100%;
    height: 100%;
    vertical-align: top;
    -webkit-border-radius: 0.1rem 0.1rem 0 0;
    border-radius: 0.1rem 0.1rem 0 0;
    position: absolute;
    left: 0;
    top: 0;
}

这样我们在任何屏幕尺寸下,都能自适应的图片大小,不需要通过计算来设置图片的 px 值,这个最简单,也比较实用,也是最好用的解决方案

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
空气

空气 · 中级学士

热卖技术,喜欢新东西。

魔童降世
查看更多

最新视频课程

钻级赞助商