标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 W. q$ J" G( ^5 t0 ?9 g/ C7 _
关键在于：max-width:780px;以及下面那行。
" G$ x( B/ H( _; _
固定像素适应:
6 k! _# p5 V/ r
5 Z# `$ l2 X! u( g
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> 以下是引用片段：
4 A8 y$ @7 ]8 z" V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' B5 m7 g$ z$ n; `* C: f
<html xmlns="http://www.w3.org/1999/xhtml";>
9 h* o- {# _ C' ]& \! t1 ]
<head>
$ h! [7 ~4 {) x3 A' U
<meta http-equiv="Content-Type" c />
& A g, `$ S6 ]0 ]" x
<title>css2.0 VS ie</title>
0 h( W) Z/ A; ^" q; A6 ], f/ d6 T
<style type="text/css">
( B9 p, i# l) i+ e! M
<!--
- F4 s. q5 W8 E8 p, _2 q
body {
) _! r5 p( L0 n4 O, N/ q
font-size: 12px;
; U4 L8 \' B! z( s
text-align: center;
2 e6 r+ ^/ O, m0 E' f9 u$ X
margin: 0px;
2 H+ h$ s' i. R" [) d
padding: 0px;
5 {" `0 a }! q5 ]1 M
}
* C& T0 q/ i1 L$ i$ h7 `
#pic{
5 G1 I( H' c: B& P3 K
margin:0 auto;
; t# @4 w8 e) W5 {: O6 G# X
width:800px;
( c; t, G0 A9 f# g" T2 C$ h
padding:0;
+ C) x( h w" f; ~8 O3 x$ D- [
border:1px solid #333;
) N- ~3 p4 M, S- T* F2 p# \( M
}
6 P% Y: a3 n! p# k0 W
#pic img{
. v3 p) a) S# l0 H# i. X
max-width:780px;
; {7 H3 D" i+ D$ j) q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ c5 }% N+ F/ c
border:1px dashed #000;
' S: ~5 }- u2 }4 v, _
}
; \6 A& n' x: B
-->
- t# a5 _. ~, e# A1 u
</style>
" `8 z4 |5 v8 J+ P4 u# {
</head>
, [1 h0 @* g" f. F
<body>
. U0 `6 ]# \+ v
<div id="pic">
. t @2 ?. w, I, e" V7 y' q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
1 ]6 ^1 p$ Y4 z, K, i. V
</div>
' M$ E: e* T+ K; K" R
</body>
7 x( i9 R. L1 ^
</html>
6 |% v4 S: }8 a$ V. n
0 n/ r* m9 k7 k
百分比适应:
! |4 O( R) D6 z/ Z- _' m3 o
以下是引用片段：
9 Q% Q0 l( M9 {; P; r& U, z
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& {% ~( d3 `4 I1 I9 |
<html xmlns="http://www.w3.org/1999/xhtml";>
6 C$ L5 y: O: R- G$ z* i" L
<head>
! Y" E1 t! Y0 p+ ]5 |2 Y/ |1 z
<meta http-equiv="Content-Type" c />
$ m3 T* q# H) Z" c D) F3 o2 L/ r. F
<title>css2.0 VS ie</title>
! x4 f4 _7 E) x7 | y# V
<style type="text/css">
3 k3 I5 ^% S# [! B4 U* q
<!--
* g: n+ A" ^) a* @8 I3 m
body {
* N. a9 E/ C, f# J, Z
font-size: 12px;
O" w9 i$ @0 Y1 ?
text-align: center;
" N1 e' ^7 C3 b5 E1 _6 w
margin: 0px;
+ k8 b- e6 l+ ]0 Y/ ]
padding: 0px;
. }( O1 U9 l8 F9 F
}
0 x+ U% H4 W5 p$ m u0 r
#pic{
' G! f* z8 R9 Z) @, a" W& T4 E) Q
margin:0 auto;
& ~; _0 X }/ Y
width:800px;
% c0 Y* d% M# \. u
padding:0;
9 [1 d8 c- E- l! k1 E2 `
border:1px solid #333;
4 A/ p7 h9 `' V, C5 ]
}
+ F0 A9 D- ^" {+ C
#pic img{
9 I+ H' `( ]7 i3 i9 Z
max-width:780px;
& Q$ X( ` ]* P. z/ H
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
+ c9 ?: r5 S/ ^3 E9 t9 d F8 f- Y
border:1px dashed #000;
* m1 t" T5 {1 l
}
# o9 V Q% J, ]& q9 I
-->
5 n2 ^/ ^6 l$ x- O N
</style>
+ o! ? p7 S: }7 u5 ]$ a$ x2 [& S6 Z+ c
</head>
- H2 V5 K. \4 Q- Y4 V
<body>
2 | l( h: A, w8 H/ k6 d
<div id="pic">
- \1 M, b( q0 U' A
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% x2 S2 A: ]2 ~: f* a9 }1 |% u
</div>
; T* i) ~ M1 ]9 x6 C8 Z* j
</body>
8 r9 k1 h% \: ~& x* g
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
