标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. K- C$ p$ f! u/ b0 t: n0 }5 b# i( M" h
关键在于：max-width:780px;以及下面那行。
; Z+ q/ w# {& K! W, Y) w% L
固定像素适应:
# C& _3 B" N: H! M' s
5 V) [+ n6 Y$ H/ j- h
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> 以下是引用片段：
5 V! M" z8 Z' z! |7 E9 j* o; u1 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; \' s) l }1 Y( @
<html xmlns="http://www.w3.org/1999/xhtml";>
3 W, y: `- b( F& x% X
<head>
$ Z5 i* i& j7 G( v
<meta http-equiv="Content-Type" c />
9 D- M' D$ o& {2 o t3 q; i3 u
<title>css2.0 VS ie</title>
9 ?/ k. b/ z+ O: D; m% E
<style type="text/css">
3 q. r; {9 @; V! ~$ H6 o/ u" a
<!--
# v3 X' Z9 E8 [: _
body {
7 P4 ^: F0 J+ q' f9 A
font-size: 12px;
+ I+ A4 x7 Y% Q& S
text-align: center;
3 ]2 }8 H. i& E
margin: 0px;
0 I: q/ h# t6 H6 U
padding: 0px;
( c. P# V. O* ~" a) [
}
u; j& y# y% e9 f" F3 m
#pic{
! D9 S8 o9 E& \! r9 c- M
margin:0 auto;
% e0 u2 U5 K! \# B
width:800px;
7 b, x$ c! e1 v( T
padding:0;
5 u% i& }" E# `6 s$ d# f
border:1px solid #333;
# Z7 b% q, c7 t# H$ M) H
}
- ~2 ^2 Z/ h* d
#pic img{
) R2 F6 C8 I4 p( E3 A$ e) a3 g" ?
max-width:780px;
4 Q. G, X Y# U W+ i
width:expression(document.body.clientWidth > 780? "780px": "auto" );
% {5 ]$ \ b# p) X7 ~- H* P1 v7 a
border:1px dashed #000;
4 w, _: @$ n1 w8 Z. o0 F
}
* ^9 t+ T. @+ e' I- L% s+ P
-->
/ D1 W+ _+ P$ G! c
</style>
4 a5 ]( R4 z! E/ e! @& {. p
</head>
+ g$ F# }$ P+ [- x6 v
<body>
$ i7 K C# F3 s8 K( X
<div id="pic">
9 {- Z* a4 e% q* d* m% H+ D0 X
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- i1 I3 z3 w4 U( K
</div>
1 e2 a6 E! z4 H2 B
</body>
7 C) u4 b, B9 `3 }) T6 l
</html>
, p, a; V& D) P7 Q+ X
5 k( n F1 L2 T4 ]9 X
百分比适应:
; M9 o' l3 A. r1 q- O
以下是引用片段：
' a1 ?, Q1 N& D9 I( k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& C% P0 Y/ @8 | Z; T5 {6 Y
<html xmlns="http://www.w3.org/1999/xhtml";>
; a2 x6 V( t! Z2 j* O4 L
<head>
6 i: K7 c5 D/ t+ T
<meta http-equiv="Content-Type" c />
3 n/ M' R+ R& E, p* r
<title>css2.0 VS ie</title>
5 G2 C) L& h3 j
<style type="text/css">
% R) W& i7 K$ F: V/ [; m
<!--
4 {+ t; A+ v8 r$ ]: l& r0 [
body {
g; M4 G) A6 e6 a* s3 i
font-size: 12px;
! j, K8 s" c% y) h
text-align: center;
% E3 m" N" g p
margin: 0px;
! c2 r/ N J6 D0 P; i9 x
padding: 0px;
6 e' m+ F* C' Y% [9 y
}
@# b7 V7 {3 P) l% I# `' H6 b
#pic{
" J' h. j. A6 [; T9 D9 P1 D
margin:0 auto;
6 ~: I6 [9 u% K( ?+ ~/ d
width:800px;
, m6 E2 H$ m1 {# |$ [9 m
padding:0;
# `% t, Y7 c; h& `
border:1px solid #333;
- E5 [ N3 ~$ ~, b0 z. p1 \
}
( R1 G% Y9 o! [
#pic img{
6 V- Q x9 U4 u2 P. a3 d# g
max-width:780px;
( s7 j3 u) a5 M& f6 V7 `9 d |6 `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 |! n2 L+ a0 n- ]7 f* Z
border:1px dashed #000;
/ \; Z* c% U; g# M
}
! T9 S2 u! W# s& ^# P- t
-->
- K( G5 [# X) \% B. \
</style>
1 A* q: i4 n& }% E- I B
</head>
$ M* {& k8 a+ o' z5 K% O6 A" z0 t2 V
<body>
+ p* b( v& J4 h; C% J
<div id="pic">
) o E8 w. c8 K, @) w( l& C
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' q: E$ k$ ^, p9 h
</div>
/ |* C: M8 v. L6 O3 _, x5 G
</body>
& }) w5 y$ Y5 s5 K! t6 f8 C9 y3 j( N2 p
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
