标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 l: g. u* \+ _+ N6 ?
关键在于：max-width:780px;以及下面那行。
, s6 ]7 @' M( Z' E
固定像素适应:
) p' F& d; r+ D% J$ D
4 j' j1 p1 o0 p) E+ D Z
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> 以下是引用片段：
9 z7 o, Q. V! E0 R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" ]8 N0 p: h3 R9 N* F
<html xmlns="http://www.w3.org/1999/xhtml";>
5 [- {9 y, U8 \/ H8 T
<head>
$ j( l( y0 v$ N
<meta http-equiv="Content-Type" c />
# a8 ~+ ~% w' ~8 P9 ?3 }2 d2 {
<title>css2.0 VS ie</title>
" f) o$ ^+ m9 B- _( d
<style type="text/css">
4 p) [9 t. {% ]* g5 S; \
<!--
4 I: H3 u9 b: m8 K( v m
body {
& v. ~' }4 a2 h
font-size: 12px;
5 N$ v2 ? x: o a6 |
text-align: center;
9 e) P+ T& B. K$ v
margin: 0px;
+ \% e5 d+ E7 o9 s+ L
padding: 0px;
) Y8 V) H8 S `- W8 N. F
}
' F3 D2 e9 q0 c; H5 g
#pic{
. ?$ D& }, t/ p4 g$ E. A; P. s
margin:0 auto;
; x: c5 Z1 W& j0 L
width:800px;
2 M- ?. l9 @ X7 `$ i4 f2 O4 n( R
padding:0;
7 Q/ w$ r. J! J+ y. y8 c8 V
border:1px solid #333;
y) ~/ |9 z+ Y/ {# O( \
}
5 G ^3 N9 n3 i5 p7 k5 n" m
#pic img{
% _6 Q2 `' R1 g9 T. g
max-width:780px;
7 m4 ^' F @. a% f9 u
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 O. Z A ?! V! o" {( `, @
border:1px dashed #000;
y, @9 i( G0 h0 K8 l# D
}
4 O, m; @* M& K
-->
2 q! D E/ E H1 V- z* |6 j4 [; c
</style>
6 Y$ m3 r$ Q/ p4 n
</head>
( K6 O6 s. y c6 ^: W
<body>
; H" ^& W* \+ X* H( j
<div id="pic">
0 s* S: p' {: v9 i9 m
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
# ^0 w6 S* t i# T& d$ j: s
</div>
+ |# g5 J/ c& V, e9 y# A/ S( ~
</body>
0 ]& O4 W1 {: n7 x& @' e9 s6 n
</html>
* k# K# e2 p' \
$ J( w' V5 o/ ]- U G4 R: e
百分比适应:
" {2 a; y3 j2 H) P0 z
以下是引用片段：
7 b4 a" h Q N# F8 ~+ w d# }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- o* k4 `' j+ p& r: A
<html xmlns="http://www.w3.org/1999/xhtml";>
; p \# @9 t" S
<head>
1 F7 l0 x8 f4 t' p# L! ^* r
<meta http-equiv="Content-Type" c />
/ _, ~' B6 Y$ i
<title>css2.0 VS ie</title>
! K' G0 j) |! A
<style type="text/css">
2 Y; e' Y/ q1 u, y" c( P2 N
<!--
" J [/ J. ]% b! S+ w% j+ j" I
body {
. j$ k- E1 i3 m+ T0 O3 c
font-size: 12px;
- d6 V" d9 W8 Y: ~+ \4 I# C
text-align: center;
* z d, y& k; D
margin: 0px;
6 p* g0 \, F) t7 ]' W- ]
padding: 0px;
" R, q1 w8 Q) O$ u
}
% r$ W3 o" [; X4 X D3 G9 M; k' d
#pic{
8 x9 x" G6 h8 q
margin:0 auto;
6 ^& W6 D6 Q* D; i
width:800px;
n4 {: c6 b Y+ A' `5 k
padding:0;
" s5 T; M7 b& q
border:1px solid #333;
+ J5 h1 q( C* F
}
2 o7 ?) m9 G* D4 I- A
#pic img{
0 ]9 S ]' O3 w1 {# S; l# {
max-width:780px;
: _: ]" I6 v0 w
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, q6 `" c9 }! t: [: q
border:1px dashed #000;
. p' O8 i# @5 m1 R
}
, o% {- \' A; X8 `, n9 u
-->
# y" z9 [- P) @6 I9 M4 s4 O9 k
</style>
+ t9 _- b& A! v I8 ?
</head>
- Y! m' }1 X" n* {' b/ E
<body>
1 |9 z; |; Y/ Y4 Z0 ~
<div id="pic">
( n" O0 C) k" x& g A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
, @; e" |$ m# C; n* m8 [3 i
</div>
U$ W! Z/ k" ^4 {0 p( E$ i) @* z$ w
</body>
7 E1 K1 H, z6 r
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
