标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' I0 \* U6 k. W" i
关键在于：max-width:780px;以及下面那行。
2 |1 j9 j4 l& [; n
固定像素适应:
) C/ u6 e' x. Z3 w) ]
( T% P- N2 w0 w3 B: l
dotted; 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> 以下是引用片段：
& s2 z0 ~5 \. H6 M
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% N. ?2 M; B/ ^9 |$ I
<html xmlns="http://www.w3.org/1999/xhtml";>
, T. M5 O& l) T. t. M9 l7 ~
<head>
: Y: v! e+ w& L! E) G$ d3 ]; U, ~
<meta http-equiv="Content-Type" c />
4 C9 _! s* }7 v0 S
<title>css2.0 VS ie</title>
# `- G n) r( O. X5 M
<style type="text/css">
1 s4 c+ D1 J6 ?5 a) }+ e
<!--
7 F% c' N7 V0 z1 f* [& z
body {
8 Z* ?+ ]8 ^1 c1 L6 P
font-size: 12px;
, S4 i9 j5 x9 q
text-align: center;
8 c# ~* [5 z: `! Y- {6 j
margin: 0px;
. Q9 j3 w; e' @" |3 x6 o- q
padding: 0px;
1 w% c/ H7 C; S: Q7 k
}
5 l& c c% b( g: c
#pic{
7 o3 v7 N9 @& j0 d( l# F3 h
margin:0 auto;
# B7 v+ u* T, I2 [, Z2 K
width:800px;
4 u& B- H& r7 a; g8 B& u- A/ \
padding:0;
* C" c3 ?9 ^; r
border:1px solid #333;
! Y( i# `' ~& m; _; p
}
4 Y$ g: x+ |* n5 `( j) H% z
#pic img{
6 O! W ^* }/ e- Z
max-width:780px;
" W" i9 Q) q5 e
width:expression(document.body.clientWidth > 780? "780px": "auto" );
0 S* y3 _ J1 R1 }% v7 R2 Y
border:1px dashed #000;
: A) s, ]1 Q9 M( m! ?( R; D
}
, U' h- c2 ?3 i. l: `, _9 c% \" R
-->
! G) g+ t R: s4 N
</style>
. `( ]1 O0 r6 ?9 o) X
</head>
8 C d5 t% u/ T* ~7 t8 K+ _4 |
<body>
, i: A5 y Q: s7 ~
<div id="pic">
# ]5 c# h* {( A+ P
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# x3 @" [5 P) f+ `4 W3 \
</div>
' @3 p' q) ~9 G
</body>
) r3 v+ \$ j/ H6 P" ]% t
</html>
! ~' N$ Q% t$ K7 c
% z# {2 V' z" S+ | O* P) l
百分比适应:
' M& y$ N0 ~2 B8 L
以下是引用片段：
: X w* l1 o7 A( n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( n2 K& }& N) W; _
<html xmlns="http://www.w3.org/1999/xhtml";>
" L U; t* C7 X4 v
<head>
1 T8 o2 r$ L$ c' \
<meta http-equiv="Content-Type" c />
; x( C; `, [- E4 Z" ]& C$ m
<title>css2.0 VS ie</title>
" I; h0 c! l) G
<style type="text/css">
( k2 G- G( S- i! K$ d3 R( B4 d4 a9 j' W
<!--
8 o/ t& K. r+ Z& V/ B W! T
body {
5 d# o) _! s: C" m* d3 }) b
font-size: 12px;
* I1 k; m6 Q' J, ]' u
text-align: center;
; H/ r+ s! e/ ~+ X: `( t
margin: 0px;
. z5 d% Y! s. K( @4 |
padding: 0px;
/ p2 h9 L6 G: Z% q2 G4 F
}
3 C2 x: P. s, @1 s/ N( D2 J
#pic{
9 |& L7 h, n5 U6 _% `
margin:0 auto;
x1 g- G, b( u4 K
width:800px;
. j3 c% q- d; a/ S
padding:0;
9 A- g1 I5 T8 T# \# U1 Z8 _
border:1px solid #333;
) [( b. n# F- [6 w% j) V F" ?
}
5 o! L \2 X) N2 d; f1 ]
#pic img{
8 |7 e. h4 B6 j2 Z" j* K
max-width:780px;
3 ~) k/ S, ~8 ^7 ]; L
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ w: q* P, Y- z7 V9 g
border:1px dashed #000;
+ C: _. u9 ~7 @, s$ O/ i% |
}
& C8 V& X4 x( R% T- L8 E# n' ?; m1 M2 a
-->
/ L ]1 e: u$ M: ]
</style>
! p& ~8 H M) u9 o8 k( o% [
</head>
6 m! ]+ D2 q0 `9 Q
<body>
+ t1 o6 V6 Z. D N
<div id="pic">
: v2 a- p" i0 F2 Q |
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 P. |0 h6 } g7 \6 C8 S0 F
</div>
% }, H! z9 _5 I# R' U
</body>
% H# _* D# v$ m: {) S
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
