用CSS控制图片自适应大小

恺撒ct10

恺撒ct10

2016-02-19 13:36

下面图老师小编要向大家介绍下用CSS控制图片自适应大小,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

代码:
 
.img {
max-width:600px;
width:600px;
width:e­xpression(document.body.clientWidth600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

展开更多 50%)
分享

猜你喜欢

用CSS控制图片自适应大小

Web开发
用CSS控制图片自适应大小

用CSS使图片自适应显示宽度

Web开发
用CSS使图片自适应显示宽度

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS控制图片成比例缩放

Web开发
CSS控制图片成比例缩放

CSS样式控制图片裁切显示

Web开发
CSS样式控制图片裁切显示

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何用CSS使图片自适应显示宽度

Web开发
如何用CSS使图片自适应显示宽度

jquery BS,dialog控件自适应大小

Web开发
jquery BS,dialog控件自适应大小

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

J2ME游戏开发中如何使用层的概念

J2ME游戏开发中如何使用层的概念

2.5 其它的ASP常用组件

2.5 其它的ASP常用组件
下拉加载更多内容 ↓