返回列表 发帖

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。" s. B$ \6 t# q; \1 e
关键在于:max-width:780px;以及下面那行。
9 R7 r! E' o8 Q5 K固定像素适应:( e% Z7 M$ T; N

4 o( q! I& ^  H( f2 w/ B& Adotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>  以下是引用片段:' N$ P4 E& b; M( \* `( _% h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 k9 d1 `* j, K4 u. Y<html xmlns="http://www.w3.org/1999/xhtml";>
, T& Q9 ~0 T( z( U  f& [<head> ( g" g' o- d4 P- Z) N8 B, |7 Z
<meta http-equiv="Content-Type" c /> 2 A% f( [8 x* f% C: u4 g* a
<title>css2.0 VS ie</title>
; D. R. w7 Q9 k+ O1 j2 Q<style type="text/css"> ( [0 Z# T" J6 f7 z% k/ W
<!-- 0 n- Z' n4 L4 y( ?
body { 3 j$ C% ?/ s& t7 x9 a' w
font-size: 12px; 9 g; ?" b8 g! s
text-align: center; % j* R  W0 C7 j# n& O3 ~/ w
margin: 0px; : {1 C- @. R( u& y' t/ P) s
padding: 0px;
6 K9 [+ [" T% {8 a3 Z- t}
7 l2 B0 G  M6 ^7 u, W" Z# V#pic{
+ d& K3 B/ J& L  |1 d" Y$ e1 L  margin:0 auto;
1 G8 r* J: ?! _+ T, @& h  width:800px; 6 u; _. r& B5 o1 Q$ r( w% f
  padding:0;
" Z0 t% M5 ~- E& j: `+ x1 w  border:1px solid #333;
- u4 l. ?/ g0 X; }9 P! _  }
# C/ O( \0 C, n( Q#pic img{
. |& d: H, C+ T; [    max-width:780px; - }& Y1 d5 z: n7 y  n% ?
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 9 S9 N% B! e1 s3 k
border:1px dashed #000; 8 g# Z  Q3 |, k1 h" e
} , V# b8 J2 J4 ~- Z8 p2 K4 s. @
--> ( Q/ t, h3 N/ b8 Y& I, \5 R
</style>
  q. a  T; w0 L</head>   L" F) {  D+ y! {/ X+ Y+ \
<body> 9 O, n6 N0 g0 m/ F
<div id="pic">
4 q* Q* `4 m+ Q3 J( @! ~<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
# h/ @( Q3 l6 q  e$ h$ w</div>
/ B& H! I5 d  |! s1 z' A. T</body>
2 ^! H' a* j4 X  S) Z# n9 r  b; M</html>
- X- f$ s$ E6 h- l! O3 e1 n8 ~* M5 Z6 _
百分比适应:1 y3 m- B9 J* z1 s
以下是引用片段:
3 K: _; r5 N5 D) E2 P& q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . F. y; f9 U! p0 d
<html xmlns="http://www.w3.org/1999/xhtml";> - M/ Y- w& t# @* {
<head> % I9 c: \$ e" H
<meta http-equiv="Content-Type" c />
: M  V+ R$ c6 H( g3 S<title>css2.0 VS ie</title> 8 O! @- t/ W1 @) ]6 @4 }
<style type="text/css">
' Y% \6 `- }# A. t7 X" I- X% d<!--
: p: G( Y$ Y" i) N( a. T5 Pbody {
; U% e( ]# ^+ v1 Cfont-size: 12px; - M9 i9 H9 }  y  ^
text-align: center; ! s$ \6 F  _! F( n$ |
margin: 0px; % I" d* W% G8 S: R8 k
padding: 0px;
+ u$ p. u9 Y' w& @}   T7 l8 D6 V, a* _& T
#pic{
% I0 G3 b' l0 i6 c8 k) U  margin:0 auto; : d) W( T3 g8 [* E% }: D+ u
  width:800px;
3 P4 k! ?! H; {% L* p% s0 b  padding:0; / a0 K; y* `9 V/ y/ q' }# f& O
  border:1px solid #333; 4 r$ W- ?! l- F: @. v- j* F$ q
  }
2 v& L$ @0 H3 N1 ^% K& G#pic img{ : g3 n5 v# r+ V
    max-width:780px; 8 I) r7 b( |/ V  c" O: Q
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 0 X: p2 A( [) Q1 Y3 I8 T& o, s$ [
border:1px dashed #000; . @8 K6 w+ _7 c- d' g( ^* }
}
  T. Q' i4 K( C-->
+ T8 ^: H5 Q- b9 `& e1 O; c</style>
3 I# Y, Z7 i/ L& n/ R" ]3 F2 ~% Y</head>
# m2 q- \  y# I+ ^1 ~: J<body> : s) c! F1 b( H' V, C& {
<div id="pic"> * W, W3 ]5 ^0 ]+ B  g4 V7 ~
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
4 t* e  \3 w& s! v7 ]</div>
# @3 ~7 i- M: A; U</body> 5 Q* N6 k; b% j! Q1 n$ w
</html>

返回列表
【捌玖网络】已经运行: