响应式网站可以针对不同尺寸的设备进行自动响应,那么图片是如何自动适应不同屏幕尺寸的呢?其实只用2句CSS即可实现图片响应式自适应。
<Div class="qdxw"> <img src="1.jpg" alt="图像响应式自适应"> </Div>
在下面的代码中,可以看到为qdxw class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。
.qdxw img{ display: inline-block; height: auto; max-width: 100%;}
这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。
设置 height:auto,相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
青岛星网温馨提醒:火狐浏览器可以按:Ctrl+shift+M进行查看。