精美而实用的网站,关注web编程技术与网站SEO推广,追求极致,让您轻松愉快的学习

响应式网站可以针对不同尺寸的设备进行自动响应,那么图片是如何自动适应不同屏幕尺寸的呢?其实只用2句CSS即可实现图片响应式自适应。

响应式图像demo范例HTML

<Div class="qdxw">
<img src="1.jpg" alt="图像响应式自适应">
</Div>

在下面的代码中,可以看到为qdxw class 为图像赋予了 max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。

响应式图像demo范例CSS代码

.qdxw img{  
display: inline-block;
  height: auto;
  max-width: 100%;}

这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。

设置 height:auto,相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

青岛星网温馨提醒:火狐浏览器可以按:Ctrl+shift+M进行查看。

在线Demo预览

Tags:响应式 自适应 CSS
如果本文帮到了您,请分享到朋友圈或推荐给好友!

网络编程 - 分类栏目