标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! _# L% w% c0 n" |
关键在于：max-width:780px;以及下面那行。
* w7 b1 Y) J U% `
固定像素适应:
0 A' t$ T* ?9 X
* S$ @; N2 p6 |1 i* P" P2 _
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> 以下是引用片段：
, r1 y/ q! Y, d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ K7 U' i5 |& G+ m1 @$ X
<html xmlns="http://www.w3.org/1999/xhtml";>
& I8 l9 s3 G0 U1 O, @
<head>
% h' ^9 F$ x* U
<meta http-equiv="Content-Type" c />
3 m8 V4 b9 x6 J& Q* X% k1 _$ m3 H
<title>css2.0 VS ie</title>
1 o* d* d* L. f# F, d( F7 z u# t
<style type="text/css">
0 n7 q% d2 v2 {6 r8 |7 M0 _
<!--
6 o6 ]2 C) W: j
body {
: J( k1 G! a" h9 M% R4 v
font-size: 12px;
( c. p# V* `* ^; Y
text-align: center;
& \. t( j. o* Q1 {% {9 U1 o3 N
margin: 0px;
9 x T! v$ ^, p# W
padding: 0px;
1 Y/ E$ u- `8 g; e2 L
}
0 }1 `" p2 o6 Y( g1 Y
#pic{
" w4 T$ y+ O6 w8 J8 I! A- |' m
margin:0 auto;
9 p" u. `7 C4 c+ @" c
width:800px;
( q8 X0 v2 y7 |9 o
padding:0;
# V( `! I: K3 \) Q5 `: z
border:1px solid #333;
7 r1 M" d$ w2 P; H0 k1 ~* ]; b
}
- m U$ E u/ _! p
#pic img{
* H- J# Z8 I; K( p# j. ]) e
max-width:780px;
( k/ N. F; H4 {9 [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" ]0 K1 X% R) m. i
border:1px dashed #000;
5 n# Y+ f5 `; @, q- L
}
' h: \1 }0 K% f% ^4 i0 L2 _+ S
-->
* B8 k$ w- z2 ^/ Q
</style>
/ s, M# v: q/ v/ u; E) v9 w+ t8 [
</head>
2 W4 x4 K0 G1 d. o) q' G/ e. Y5 i; j0 Z
<body>
2 Z/ Q. D# Z* H3 o; O: Z. t! m& y
<div id="pic">
* q9 ^9 B8 |8 u: T8 b3 v
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 t1 ~3 L+ k6 t
</div>
$ J' b9 f2 B' V4 y
</body>
9 |7 U" c- A' q9 L# X E) H& z
</html>
1 b1 M1 ^; _3 Z
, d: J ^% f: }) H4 g
百分比适应:
3 D7 I: ~9 N7 Y& H# _
以下是引用片段：
: r& N( w4 N5 _- `- F# ^0 q8 N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- e0 m9 W! j* ~7 Z
<html xmlns="http://www.w3.org/1999/xhtml";>
: [# j( j( V7 e- D
<head>
' j$ g) O8 C* c; P8 r
<meta http-equiv="Content-Type" c />
$ z7 C i/ n* q
<title>css2.0 VS ie</title>
* X2 I# ^( s! ]* x# C) d
<style type="text/css">
8 N( Q+ @% ]" M- \1 \
<!--
8 ^0 m- ]4 J" o3 X9 m
body {
* X; l) Z/ K6 t
font-size: 12px;
( B! v1 W' A9 e
text-align: center;
3 }3 v) K! t' {) _7 l* Z6 e
margin: 0px;
4 C7 S4 |8 G9 G2 _# I
padding: 0px;
' n* g" V" k+ e" h% I* ~4 ~6 c4 A
}
- ^! Z6 P9 V6 d
#pic{
% w- t$ w8 o: g: |
margin:0 auto;
* x5 s$ o. z |6 J
width:800px;
# Q- }% f/ R( P+ O( X$ @
padding:0;
/ W: G2 N, w4 Q4 l
border:1px solid #333;
# C* t* b. }; ?! ?# D: B2 t
}
( M8 Q/ s! i2 p; b' h! O
#pic img{
G. c- _" G) ] g! U' f2 i' @
max-width:780px;
9 _& ^2 H/ f% @' h/ T9 Y& N
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
$ {) @) `1 ]- a) e9 V
border:1px dashed #000;
' |7 e; R9 e8 L, }
}
8 j: d# O, k7 l0 k0 Q: i
-->
% q/ S0 e: d6 q
</style>
5 L7 @" c% [# s& R) a) Z
</head>
, ]' o8 L% |; c, X$ y( o# m4 h
<body>
! _; J6 E; `9 i
<div id="pic">
4 e5 W7 _& l& t3 h0 H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
( w- K2 _) k! M8 M, v8 B
</div>
% x* P$ |: S) ?3 h% X
</body>
8 @" Z& Z' a; S; k& l3 s8 l G
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
