CSS3提供了一个新属性max-width:100%设置最大宽度为100%显示,在配上height:auto高度根据宽度自动。就轻松解决了网页图片大小自适应的效果。
网站设计制作不得不考虑客户端显示屏幕大小。如你设计的图片显示太小,客户显示屏幕很大看上去很小气很不协调。反之图片很大在客户小屏幕在就显示不全把页面美观破坏。
--------CSS3样式代码--------
<style>
/* 图片自适应 */
img {
display: block;
max-width: 100%;
height: auto;
width:auto\9; /* ie8 */
-ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
}
</style>
-----图片大小自适应代码-----
<div class="img"><img src="pic.jpg" /></div>
成都创新互联科技有限公司专业网站设计制作、域名注册、服务器空间购买电话:028-86922220