Heim > Web-Frontend > js-Tutorial > Hauptteil

JS+css 图片自动缩放自适应大小_javascript技巧

WBOY
Freigeben: 2016-05-16 17:26:20
Original
1492 Leute haben es durchsucht

我加了css的限制:

复制代码 代码如下:

div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

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



单独的图片控制,用这个:
复制代码 代码如下:

<script><BR>var abc=document.getElementById("abc");<BR>var imgs=abc.getElementsByTagName("img");<BR>for (var i=0,g;g=imgs[i];i++)<BR>g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}<BR></script>

测试在IE和FF下通过。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage