标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
, F+ I# |& x" g9 p# y& N1 r: N! ^- L+ f# q
关键在于：max-width:780px;以及下面那行。
U+ Y# R1 [1 E4 \2 ?$ o) c
固定像素适应:
! ~: [6 E `8 ~+ X2 D$ K6 U
5 V+ L& @( q5 J$ p. Y- p
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> 以下是引用片段：
; s d1 }& H+ @8 o& y% |4 A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
/ w [+ u+ Z3 B2 N" N
<html xmlns="http://www.w3.org/1999/xhtml";>
) U, t9 i: z% {
<head>
, m( I" |& [: R+ e2 r
<meta http-equiv="Content-Type" c />
2 V8 T& e/ D! D7 l& W% h% n
<title>css2.0 VS ie</title>
2 k2 j+ Q, c3 X% f6 e
<style type="text/css">
: P# M& a( [! j, j1 }
<!--
7 W/ j5 v) \1 p: }2 X: T
body {
; n3 b! E1 k# s6 E( N
font-size: 12px;
6 x0 K, o9 s' Q" ~) k% G y
text-align: center;
; W0 D. q. K K, ?3 L9 D3 _; z4 X
margin: 0px;
3 v7 t. ]! [/ H( M
padding: 0px;
# y5 j2 _( c4 Z0 j: }1 P
}
8 h# Z; g# k$ V3 D- J+ c
#pic{
% K0 O; \7 q' a2 R3 Q/ R0 ~
margin:0 auto;
+ ~; E( r+ Q3 {9 Z3 H
width:800px;
1 `$ F2 r% @$ \) _- w# R5 r
padding:0;
7 i4 Z/ n% s6 h5 ~8 t( J
border:1px solid #333;
3 [" {. ~+ p) ~) y, c/ X% G- F3 i
}
: [- H% q$ ~1 H$ m
#pic img{
0 G. y0 a& U6 [- t6 P8 b$ o& y
max-width:780px;
2 U/ |& [: Q( E9 |" ?
width:expression(document.body.clientWidth > 780? "780px": "auto" );
- Z# D3 s5 X! a2 K/ U
border:1px dashed #000;
/ \5 t+ @% l$ K, d: Q, a
}
7 c* t% l8 T+ ~* ^: l" P
-->
) O2 @+ }4 B3 f
</style>
0 U" M; h# j I- D
</head>
2 S; M) J, h% R# n
<body>
8 V/ \5 d. l6 D4 t4 Z5 A
<div id="pic">
" w" w+ b5 q) h4 e
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% J: i0 v: R, f4 D* J
</div>
! J9 A% r3 ^5 O* V4 X& W* |* `) g- |
</body>
9 o9 S5 A: D) {# ?# |# Y. |0 V
</html>
" l5 H9 _: X9 Q0 F6 I
& `& l# B! `) p" X
百分比适应:
5 B: e4 d: h' ^! ]
以下是引用片段：
) ]) _6 h( ]! q* i! [3 S
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' J Y) F2 F d) Q; h' Q
<html xmlns="http://www.w3.org/1999/xhtml";>
; C H6 F( r+ j
<head>
* f) \( }' t% \( g$ s
<meta http-equiv="Content-Type" c />
1 E f! ?. H# [: \1 y/ G
<title>css2.0 VS ie</title>
& E$ e8 T+ R" Z" F
<style type="text/css">
* T; I8 L5 p) |1 v8 K
<!--
! M$ _$ z) l$ X7 T
body {
% Q) I; }/ e$ M# L& j
font-size: 12px;
" }! \5 m$ X( X
text-align: center;
, j6 y$ _* t2 W: J
margin: 0px;
- ]) r: r$ y7 M2 k% c- v
padding: 0px;
/ J' P G4 |" F& Y. P9 r, i
}
' l' W9 i8 M w& u" Y3 {
#pic{
& ~. F/ u/ M x
margin:0 auto;
- {/ L1 [' ]: X, Q; P5 r% W4 B
width:800px;
# {8 ?0 ^% X% n' K
padding:0;
' K; x6 @% H0 g. _1 U4 p
border:1px solid #333;
, |# f3 \3 P3 q( U4 g3 Q
}
( N @# }/ Y# q9 p# R. P
#pic img{
: o) Q8 S1 [# Q2 U' \; Q
max-width:780px;
8 L5 y6 I, o" P; g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 F5 y% D7 e# i1 ]% x, M
border:1px dashed #000;
" E" N& ]! Z( n6 k+ m
}
# O" ]% J! k: |/ p9 m7 i
-->
/ [5 c# C' V7 h
</style>
. K+ H ]& e `8 E# v- [
</head>
; J* B) I+ `" R' [: I; O0 ^
<body>
6 o2 t& ]& j) S; P3 `- s
<div id="pic">
4 _7 a+ D# x) j, A+ I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ r2 E" M$ Q1 ~9 B6 z" p0 ]" k# W. H' ]
</div>
0 H" x" ? k9 R5 Y
</body>
* u! p0 `- G; H" B% K& s
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
