div下图片自适应解决方法
今天在经典上发现的。关于图片自适应的方法。适合像偶以及和偶一样的菜鸟一起学习。* j0 X- i- E* p% A9 d% S0 N
不用js来控制,而是直接用css来实现。
( k( Q0 u7 N7 l+ i G/ L关键重点在于 这一行,
; H6 h' G! j+ s7 v4 _#pic img{max-width:780px;width:expression(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000;}
0 ]# ?7 Y8 _3 Y8 o# T0 ~百分比适应同理,
8 p* O& B. ]* q4 Q#pic img{max-width:780px;width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); border:1px dashed #000;}
7 t' F7 t* `0 L1 ]另外一种方式:
( O% ]7 r0 Y% I& e#pic img{ max-width:560; width:expression(onload=function(){if (this.offsetWidth>this.offsetHeight){
/ I7 Z+ ~3 O- C! H3 `6 o& B this.style.width=(this.offsetWidth > 560)?"560":"auto"
9 V6 c. |1 e8 {1 O4 y; { }+ C1 I! t- `" M
{this.style.height=(this.offsetHeight < 560)?"auto":"560px"}
9 K5 t, @2 v( J7 \! m6 K });
% G B+ u, |& J$ ^: |% ] border:1px dashed #000;padding:3px; margin: 3px;}