标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
' J: v/ v$ }0 S4 m+ t8 y3 b: @* n
关键在于：max-width:780px;以及下面那行。
/ W& ?) O& h9 n/ l
固定像素适应:
9 z! N/ w% W/ S5 G5 E. }7 @
/ N# N% i- I2 s
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> 以下是引用片段：
. F- ?# f% w$ W! |2 K+ S, h) ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 s: y8 G' t0 {# ]9 n
<html xmlns="http://www.w3.org/1999/xhtml";>
. z9 q, A' f2 J1 A
<head>
- y0 v& I4 [) v1 D+ F6 J
<meta http-equiv="Content-Type" c />
. |) }/ L4 ^" w2 r# T% k$ |8 A
<title>css2.0 VS ie</title>
5 [$ C, t$ C# X Z
<style type="text/css">
5 O, s, N3 p9 ]0 j2 \
<!--
0 k4 d+ I1 u& q+ d2 k7 e! t) ? x
body {
. x. d0 @5 N$ o1 `
font-size: 12px;
4 L5 o0 o9 P1 V8 w( W& ?/ i
text-align: center;
9 M8 Z2 D, E. u; P6 X2 {0 E: ^
margin: 0px;
. B$ D$ {* T: U5 n9 v1 X1 G0 I4 Q
padding: 0px;
1 Q( S r8 V4 u! H
}
% L1 t9 {& y& [0 v
#pic{
3 i. F" ?8 F- h" @. |" J
margin:0 auto;
/ L0 M1 b1 J" y! X" P
width:800px;
' w5 l7 i( ?1 ?4 N; W$ V) C& L
padding:0;
3 n0 X$ p" m# T' j1 I8 h) V6 D [
border:1px solid #333;
' r" i+ E5 h: f7 E. ^
}
8 t6 @) h7 w2 ~
#pic img{
( F5 |& N0 t+ R* Y; G7 m2 z& c, f
max-width:780px;
- v, V7 A8 f: r" ~- I# \0 z$ i: ]
width:expression(document.body.clientWidth > 780? "780px": "auto" );
6 S& ?7 {* }: p
border:1px dashed #000;
( ^4 a( l4 q$ U% h$ W9 }
}
7 h0 ]! H( _# x# E+ z( q6 i
-->
5 Y' p# e. J. L( T$ ] ?
</style>
- C" a/ N$ K. c; J& R; D
</head>
; J& w# D' W X0 G4 R
<body>
7 Q4 f/ w# f' Q& b+ q
<div id="pic">
/ `, i7 l. U. @5 b
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, P: h1 _6 w6 b
</div>
4 B( d# r: r6 Z$ z8 n: u# O! E/ W
</body>
) z2 w& M0 K" n K, U
</html>
: U: a! s( \6 r% Y$ Z, g( C
. n$ x; ]; I; l! {7 \& u# A- F+ ?
百分比适应:
! j& B# W2 u# w6 p) a/ E
以下是引用片段：
- g+ V; P W+ T8 y, @/ j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 i) j* x/ k- |, k5 f8 M5 h+ J `
<html xmlns="http://www.w3.org/1999/xhtml";>
0 ~/ p: \- h: x8 e) K& z
<head>
, k2 o# K! Z& g$ {: M& A
<meta http-equiv="Content-Type" c />
. x% B2 O4 D" M% e2 k4 Y& h
<title>css2.0 VS ie</title>
: R* O! k, Y; t6 v$ c
<style type="text/css">
6 p6 H) M7 {! Q( E8 Y6 \: Z% D
<!--
4 Z( F9 U6 J: ^5 z
body {
- l. [7 y" H* I7 V7 K; [! t
font-size: 12px;
' C; E) S5 {5 e& g+ ^' M' m
text-align: center;
) t* O" M b) E9 y X0 w
margin: 0px;
* V& a ?! _- j# L/ V% Z' j1 \
padding: 0px;
+ m( \( P) J$ x+ z& B7 |0 h. }
}
; V2 e% ^ E9 w1 k4 j$ ~
#pic{
& l% N" r1 d f0 h' c1 }/ n
margin:0 auto;
& z4 L; \; G4 |8 R6 H7 {( h1 n
width:800px;
6 x4 k R% v. q, ?5 D
padding:0;
# w4 u9 P! a0 a9 z0 b
border:1px solid #333;
. i* n9 _8 w k/ g& S
}
; t- D: o: x" L
#pic img{
$ @3 l0 y, N, G" R! ?/ D* L
max-width:780px;
- Q5 C* A9 G0 R2 t$ e F- n7 v
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ E$ J7 A9 x& ~6 A7 O) z# S
border:1px dashed #000;
% }+ y8 F& X9 p* q: e" [! E8 U& y2 C
}
; b9 p2 H; h1 g) v6 `8 }
-->
. a/ N8 E: y1 O# M/ ?
</style>
# a8 E1 F% I5 p+ A# B: l
</head>
3 E1 ?4 z; c7 m ]% Q
<body>
4 `" r( ^4 I) m& ?; A3 ]
<div id="pic">
3 _- f, j4 r& Q) x6 V( l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
5 w, ]" C: {5 ^! L* P- n0 u9 f
</div>
# y) `- c1 D5 G6 q
</body>
9 x& e1 V0 D4 @% S [
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
