max-width实现图片的自适应

在自适应布局中,有时候会让图片随着宽度的变化相应的放大或者缩小,或者说让图片等比缩放,但是每个图片的大小又不一样,这个时候我们就要用到max-width这个属性了。

img{

  max-width:100%;

}

这个属性直接设置在img标签上,这时图片就能缩放了。

但是如果在百分比容器中使用这个属性,并且要实现所有尺寸不同的图片显示相同的大小,并且实现等比缩放,这是单纯的在img上设置max-width:100%这个属性已经不奏效了,看效果:

max-width实现图片的自适应

左右两边宽度都是50%,图片也可以缩放,但是高度不能等高。这时就要统一设置图片的高宽了,宽度用百分比或者px都可以,高度就要设置为定高了,这是无论图片大小是否一致,都能实现等高缩放了,效果:

max-width实现图片的自适应

css样式:

img {
    max-width: 100%;
    width: 100%;
    height: 140px;
}
上一篇:JS生成当前月份包括最近12个月内的月份


下一篇:虚拟磁盘配置推荐(VMware三种磁盘的区别)