053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

图像在响应式网页设计的中解决方案

时间:2014-08-15

图像在响应式网页设计的中解决方案
图片是出了名的最具挑战性的方面之一响应网页设计。今天我们将看看<图片>元素,解决图像响应的问题,现在可以使用。
首先,固定宽度,像素完美的网站设计是真的过时了。今天的宽屏显示器、互联网电视、多个大小的平板电脑和智能手机现在我们的设计必须满足从320 px宽可能高达7680像素宽。
伴随着这种多分辨率景观的是需要图片拉伸或收缩来适应这些变化多端的需求。这可以被证明是考虑到一个问题,除了矢量图形,绝大多数的图像有特定的基于像素的宽度,不改变。
所以我们怎么解决这个问题?目前,最常见的解决方案如下:
img {
    max-width: 100%;
    height: auto;
}
 
这段代码使用max-width:100%设置,以确保图像不超过他们的父容器的宽度。如果下面的父容器缩小图像的宽度,图像将会缩减。高度:自动;设置确保图像的长宽比不变,不至于使图片发生变形。
相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP