带有图片的的列表实现自适应的方案

自适应是个很长久的话题,尤其是在做PC端界面时,考虑到自适应的过程,图片也不能定高宽.现在来讲一下.

一般图片我们用一个div来当容器.里面放置我们要设置的来自服务器或者本地的静态资源图片.结构一般如下所示:

<div class="imgContainer">
    <img src="images/a.jpg"/>
</div>

这时候有两种方案来实现图片的自适应

方案一:

imgContainer容器不定宽,而是根据它所在父容器的总长度占比,将宽度设置为百分比模式.

例如:容器长800px,图片在设计稿中未200px.这时设置父容器宽度为100%,则图片容器宽度为(200/800)*100%=25%.

设置子元素img的width:auto;height:auto;max-width:100%;max-height:100%;,具体代码如下:

.fatherContainer{
    width:100%;
}

.imgContaier{
  width:25%;
  height:auto;
}
.imgContaier img{
    width:auto;
    height:auto;
    max-width:100%:
    max-height:100%;
}

方案二:

imgContainer容器不定宽,并且有兄弟元素在一列中显示,这时候,可以设置imgContainer为绝对定位,并且定高定宽,img则为width:100%;height:100%,这样在不同分辨率或者尺寸设备显示时,图片不会变形

如实现下图效果:

<