在自适应布局中,有时候会让图片随着宽度的变化相应的放大或者缩小,或者说让图片等比缩放,但是每个图片的大小又不一样,这个时候我们就要用到max-width这个属性了。
img{
max-width:100%;
}
这个属性直接设置在img标签上,这时图片就能缩放了。
但是如果在百分比容器中使用这个属性,并且要实现所有尺寸不同的图片显示相同的大小,并且实现等比缩放,这是单纯的在img上设置max-width:100%这个属性已经不奏效了,看效果:
左右两边宽度都是50%,图片也可以缩放,但是高度不能等高。这时就要统一设置图片的高宽了,宽度用百分比或者px都可以,高度就要设置为定高了,这是无论图片大小是否一致,都能实现等高缩放了,效果:
css样式:
img {
max-width: 100%;
width: 100%;
height: 140px;
}