标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
$ U |) I" S) u2 R4 {1 m
关键在于：max-width:780px;以及下面那行。
5 l( A9 {* ` _& a& A# }% Z
固定像素适应:
5 B( f. G2 q. Y0 K* J0 }( D
7 i, G, I! X; _8 e. K; U* f
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> 以下是引用片段：
1 Z; j9 s6 [ t8 }4 m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 m% l q! D! m9 U. M7 z; d$ ^
<html xmlns="http://www.w3.org/1999/xhtml";>
. E( \" ]( N0 u) a
<head>
$ a U4 [! j0 a8 s8 `
<meta http-equiv="Content-Type" c />
, z3 E$ x( M# [. U ~: V5 [
<title>css2.0 VS ie</title>
, K# o* f m3 {; L$ D
<style type="text/css">
( Q- H: T( l8 @( a0 k( j9 S# N
<!--
) h/ |, H+ }6 E
body {
; O' A7 g% Q; M
font-size: 12px;
2 a8 X$ C, u- j6 h% e! u8 F
text-align: center;
3 [" o/ Q w$ `% e9 ?
margin: 0px;
5 ^: S) S: J5 G0 p0 m3 r* S: f, G
padding: 0px;
. ^# H" a( ~- j" I( k) |/ e7 M9 ~7 f
}
) k; A8 l4 N! X- n; p6 B
#pic{
9 [: H4 x8 D Z7 Y' L9 i
margin:0 auto;
+ \6 x& A Z, o5 z4 i- v, [3 R
width:800px;
+ C+ x/ G6 V1 P! M! \9 }
padding:0;
# m3 X' W! G1 q5 s/ p; o
border:1px solid #333;
! b% w) D. Z' A# J
}
; Y3 O; o+ ?# D% Q4 |- O
#pic img{
" n2 t6 s5 Z* U7 Z9 W/ R1 U
max-width:780px;
0 T0 e2 Y$ e- f; r' x# y
width:expression(document.body.clientWidth > 780? "780px": "auto" );
/ c1 x; e* r5 C7 |( X
border:1px dashed #000;
8 q! u) K# {1 e6 i, ~; u/ P
}
$ h# S7 M. ~% ^- h8 B: P6 k
-->
, _% B8 s- ^* V4 {4 h, H7 }; o; }
</style>
+ v! s% I9 a- q7 Z# t
</head>
% Y6 }5 W4 T, {; C1 j1 h
<body>
$ N0 l6 B4 E1 H) ?& r
<div id="pic">
& b+ Y3 w% {+ V% W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ h( F, i2 D6 x+ h% g2 L
</div>
' w; c t; K. ~" s0 ?. V4 e
</body>
' Z6 F2 t( z8 d' o: i- d' k
</html>
! B/ e. I T/ M1 G9 n) d# V+ z, B
. p. n4 c6 [6 M3 c q4 \/ A; E3 L
百分比适应:
' }+ h8 ?0 z! @
以下是引用片段：
9 S2 o% u4 D; W; m( T! [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 N7 M3 e- x7 K" Y
<html xmlns="http://www.w3.org/1999/xhtml";>
d( O0 a W: ], g1 h o, m
<head>
2 X9 X6 [# K$ ]- z( s* p
<meta http-equiv="Content-Type" c />
, Y+ z6 B* U- C6 `, c$ j
<title>css2.0 VS ie</title>
4 \( _' \$ H* b3 L& S# S: G
<style type="text/css">
. i5 Y6 S+ N8 ?- g9 t$ n1 ]
<!--
/ x& v9 n/ v% R, U" C, D7 f
body {
# L3 u. L7 m/ a! R8 v+ L
font-size: 12px;
2 R8 }& a4 }- _2 t( u" E
text-align: center;
. t9 w5 i( k# ^+ v `
margin: 0px;
' A% L* a3 I1 f- T9 Y, w6 M0 g
padding: 0px;
4 m4 a+ g! _) N! e% e
}
6 P0 w3 o5 V- j6 v
#pic{
7 k+ v4 `) O1 I/ Q% E7 T, W
margin:0 auto;
: a7 u5 U3 R6 K
width:800px;
8 i7 x/ G; o b# d8 e: R/ h7 p w
padding:0;
' P' v- [+ G) b+ D; V
border:1px solid #333;
' x) a: w# `8 ~: O1 f) z
}
; Y8 G6 t2 q8 f0 ?: H% G# `
#pic img{
) |) w' P" g, G' u4 y' V9 I& |+ w
max-width:780px;
& ^' s- ?! [. L7 L, e5 p5 B/ k
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 p: Q5 p/ H; _5 |
border:1px dashed #000;
8 D# v2 t8 S1 v: [# i
}
) A: U& A F5 \3 w. V: M
-->
* H: N. u$ S& c& Y7 j$ i$ @
</style>
. C& U2 g; ]/ S
</head>
- h; k |5 l6 [
<body>
2 i' `0 R: @! [8 }0 m/ |& v
<div id="pic">
# `- V) ^' ~; f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! @4 _- O+ m9 h$ G6 \9 i
</div>
; Y0 e2 E3 N$ e2 O
</body>
! l5 z2 H9 R* M7 d
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
