标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! q% r! C x9 z7 r1 |4 ~/ D
关键在于：max-width:780px;以及下面那行。
0 @( ]) e8 N" N& V
固定像素适应:
0 I3 Z; L6 Q9 q/ i% y
" b- `; D, ^8 o6 f, Q
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> 以下是引用片段：
" b) ~* J6 |9 a8 l4 V4 Q6 Z* t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; s; }( H8 |+ p; ]
<html xmlns="http://www.w3.org/1999/xhtml";>
" Q2 C2 O& ~) {& E# R; x
<head>
2 ^; c7 t$ J8 X- v, P
<meta http-equiv="Content-Type" c />
q. d: C' r8 d) {% Y l2 W2 l
<title>css2.0 VS ie</title>
" n) N5 ]- `8 [- ]0 x
<style type="text/css">
6 S8 p1 f9 G p/ H$ ~
<!--
9 k. h# X! E- s* V+ L
body {
* l7 _5 `' D5 t+ Y
font-size: 12px;
" s) @) ^' Q0 r/ [9 g$ f
text-align: center;
; K; T- G% E3 |5 z" ~# c. S
margin: 0px;
/ U: Z" d- ]- {7 |1 \( o/ p
padding: 0px;
/ p3 q! k" k1 C0 ~, ]
}
K/ L( S% p% @0 ^# N6 j8 h
#pic{
5 P9 u) t! x$ v0 d+ z
margin:0 auto;
9 `7 U, U( X5 \9 j) u2 j& V
width:800px;
' D7 S, X1 E5 x
padding:0;
* Z& {, p2 s; {- f: g
border:1px solid #333;
# I- j5 v" O$ d+ N, u7 B3 @# V
}
8 V+ f$ N9 _/ ~2 s* O
#pic img{
) q" m) J* V) O3 b0 v9 P8 J* ]
max-width:780px;
0 \. G) k* _( [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
x; Q' U/ `- e# \: d# a0 L
border:1px dashed #000;
) e" T4 c6 J, t6 k/ i
}
& w5 e& A( X& l7 f
-->
2 z8 T, a' F) m4 _/ o5 h9 H; @! W
</style>
7 R3 A: z( x# K* R7 v: c8 J3 K
</head>
' ^0 Y, e) l6 g6 U; A
<body>
1 m+ v1 p7 O( q F8 l! X0 T. S/ H
<div id="pic">
6 w2 n& }; z" A( L i8 s; j5 [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
C5 O* V' B1 _5 B
</div>
0 b/ B: d& K" L4 i( C+ j
</body>
5 K& M5 z: v5 s. o( K; ?8 F( G
</html>
1 s( J9 V8 v } t0 o8 Q
( B% V7 g2 U2 Z$ ]6 B3 ~
百分比适应:
N6 H3 c6 z- r/ R% `( ]+ Y1 u
以下是引用片段：
9 C) ]+ O( F j e) c1 ?& Q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. `5 a0 T) x" J* m+ R
<html xmlns="http://www.w3.org/1999/xhtml";>
3 [. [* T4 t- Q6 T
<head>
/ n( b& H7 P- f/ Y9 r9 e
<meta http-equiv="Content-Type" c />
% z% V# h Q& u4 D0 p# N6 Y. m
<title>css2.0 VS ie</title>
& }$ N! g; j; ]& S) n; O9 V
<style type="text/css">
- Z9 Z0 B2 A9 z: h5 p$ y
<!--
7 M/ ^" P/ s! \- X3 [: C
body {
( f( }% C/ W% S) l R. \! U9 u7 s
font-size: 12px;
( n1 m- r# u3 Y! y
text-align: center;
, Q d$ _/ P$ R6 q( g1 t
margin: 0px;
7 n! {9 H+ R0 |. A! e
padding: 0px;
5 ]$ L6 k8 u& ]% N7 j' z% @5 h
}
& W6 c6 | P4 b D% {3 a- y; q% g
#pic{
+ p* F, `; M' Q& ~0 M/ a
margin:0 auto;
& w3 @& e) R# N: c( w
width:800px;
' b5 Z* s8 {* y$ F
padding:0;
5 B9 L/ e8 g# h/ |9 C/ k* r
border:1px solid #333;
) @1 s0 ]2 a9 L; H
}
! u/ g* H& {# a
#pic img{
. ^* l* S. S5 ?7 _- F% C- ?1 e
max-width:780px;
- W, T; q/ _7 r8 n* d
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 Z5 @5 V0 ~& ]* b! n3 V* g
border:1px dashed #000;
( A( `$ J' b8 [! [3 {
}
, ^3 d+ R1 v1 d* L1 f: p2 }# j# y
-->
" ]/ ^ W9 x3 [7 ^
</style>
) b: y, ^0 X4 a2 v* R! y$ u7 {
</head>
^+ z* M. p2 l# x2 r E3 y' A
<body>
: @, v- U' ]) Y& G$ A+ _: f
<div id="pic">
: t1 i% c! q0 L9 P! j' q0 Q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 e0 e' N" q+ O
</div>
P* w' \8 w" j0 m8 w- F) u+ Q1 F* b8 a
</body>
) `. P6 @: n$ F! v; L
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
