标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: a6 m- k, K& x0 {; B C7 @/ ], Q
关键在于：max-width:780px;以及下面那行。
/ g) y' p" w8 e p% k
固定像素适应:
' m6 @# b/ ]3 J; ]# w- }/ {- `6 L
+ Q$ P2 n6 S4 I: z5 `1 F; i r
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> 以下是引用片段：
( z0 `* E0 n: W( b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, n s% `. S5 Q$ D: |7 b r% b" f
<html xmlns="http://www.w3.org/1999/xhtml";>
. e7 [. S2 Q9 i, X3 c
<head>
3 A4 @( i8 h0 Y& _& W. N0 U6 ]
<meta http-equiv="Content-Type" c />
3 t* T( P& v$ t7 k' V. @
<title>css2.0 VS ie</title>
8 U7 G/ }" D$ }" x( B. @6 u
<style type="text/css">
2 d5 F/ k. [3 b- \% K, }1 ]0 G
<!--
, g" {: ]: z- r- J8 b& U- _/ N( c
body {
0 n* Z6 ~4 j* ^6 r. z! k# {) c
font-size: 12px;
+ Q) S3 V8 g4 C5 R7 e! `
text-align: center;
: ]* z- s" I6 t# Y$ H
margin: 0px;
/ P4 M! _! `% L4 u" D( V7 `
padding: 0px;
# x2 T1 ?. O, F! \! k
}
6 t) e G0 @2 T7 Q% `
#pic{
6 {5 @. \$ y0 @
margin:0 auto;
# w9 f4 X% |1 Y/ e' s
width:800px;
6 U& {$ V5 v5 P/ c! G; l
padding:0;
* y) B! D( a4 w. Y. @ z1 z
border:1px solid #333;
, h( q- c: i C2 F7 y- a
}
3 h6 u7 z- ] k5 b) y
#pic img{
# X- e% f% _ L
max-width:780px;
! N; ?! R! `8 g- T
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" C' N3 F; O7 N' S$ s6 z
border:1px dashed #000;
0 ~+ D# W: s! a# e
}
% \& X% Y3 @5 F6 C# P" C/ y1 \7 u
-->
0 ~# c9 {+ K3 G. M5 \) E% J
</style>
; ]% y( d" P+ W
</head>
' F& \4 o: F4 Z% ?5 _* H" F0 y
<body>
6 T6 w& p! ~! k: A1 S
<div id="pic">
6 }; P( Z- Z2 @3 [ x% @
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 c% f- e1 [" E" w. r
</div>
8 z! I! A3 k; d. F1 X
</body>
& V4 `$ O: |% ^) @8 E4 g
</html>
/ a0 m4 k9 k& f, A8 H3 s& I' f
: S! a4 \/ j$ z' ~& x; D
百分比适应:
; A d3 u% R$ l4 i
以下是引用片段：
8 r+ P( t/ u2 P9 p2 l, `& S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( _- |; r- p$ R( Z4 V1 u. o$ y! I
<html xmlns="http://www.w3.org/1999/xhtml";>
$ {! _' l0 I6 ?$ {" O$ C
<head>
- v) a k3 C$ ?! Y
<meta http-equiv="Content-Type" c />
! e4 u5 V4 \1 s8 s: D# a# z
<title>css2.0 VS ie</title>
* o. i5 u3 B' C8 v4 o& _* M
<style type="text/css">
: `) ^ H7 m* ]0 u
<!--
$ F0 y1 w8 g! n4 Z7 F
body {
8 k. ^! C; H5 ]) k& g& V$ x$ e
font-size: 12px;
$ l K# Z8 _$ }
text-align: center;
( \3 L/ C3 }& q. W4 s1 i4 Q7 ]
margin: 0px;
4 c- m, `# j K: A# [2 u
padding: 0px;
9 F9 N- I; l( K: T9 U
}
3 h0 U. Z& k* N0 B2 C% {
#pic{
' T% w( T2 V( {6 y, [& z3 i, z- R
margin:0 auto;
; \, d0 w" {. w9 J( z3 B
width:800px;
$ W4 ]+ p' R9 ]& {
padding:0;
' \5 ^) [ t, [
border:1px solid #333;
0 I! U' ?! H9 h/ L3 Q
}
$ C' R5 R' Y; u5 W" {* [
#pic img{
( D4 G/ u6 n/ G+ l0 M
max-width:780px;
, t9 N% x7 r" R0 f, [/ c
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
" ^. I' t7 Q) h% P
border:1px dashed #000;
9 ^1 c( q8 A$ R$ u/ n
}
' I0 ?, P# E2 C
-->
; q+ e; t- a# M2 W
</style>
$ y, f+ s/ c- O& Z. p% f
</head>
- m( q T) G3 B0 m2 `. F _ h
<body>
0 B# E, H+ e( z3 g* y
<div id="pic">
2 [ H7 u/ l5 M! O# j- e H+ V
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! x/ }. @$ o/ Q& b9 u7 l' m
</div>
6 R) R* ]# q, `
</body>
m% u0 }6 v2 z. \( w
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
