标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
: ?1 Y% T3 W" {
关键在于：max-width:780px;以及下面那行。
& p4 a5 s* t' \/ y- |+ z: _+ d
固定像素适应:
" O' B/ [6 z* W8 ^. @- F6 _
. C3 R: c' W: E' \2 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> 以下是引用片段：
' a0 W, D* u7 G0 r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 s+ f9 ^9 _5 `5 s) ^# s
<html xmlns="http://www.w3.org/1999/xhtml";>
4 \% k: c$ W3 l8 A. w/ T
<head>
) p/ {. T' [3 Y. p5 o
<meta http-equiv="Content-Type" c />
- `. h. ^" g7 k2 f4 _3 n7 q$ Q
<title>css2.0 VS ie</title>
% J: v$ K2 W% |6 O) s8 X: B v
<style type="text/css">
' _# W, x, _, o5 \( _2 d, T
<!--
) Z8 }9 I1 i; a' j
body {
, {$ E: r h; h6 o" n
font-size: 12px;
+ B- k, V- N9 K, F7 k* l/ a
text-align: center;
& d a: f% m F2 Z% D5 y& E
margin: 0px;
( {# U4 }5 y% c
padding: 0px;
: S4 n* h$ h9 m7 Q+ @
}
8 y+ F: L8 g( \6 O4 J0 V$ Y
#pic{
" x- U) r9 F! z, |- h. O5 h
margin:0 auto;
/ p5 A# ?) S }* W) i: R' U i
width:800px;
! A5 c7 d6 |) K( j! l4 A' H
padding:0;
5 w% k9 O5 H; p, m& E# P1 {1 m
border:1px solid #333;
, V6 s/ H& z4 B* [+ w& ^
}
; n o+ i0 g3 q( G
#pic img{
' E# v1 g; ~9 t R
max-width:780px;
: d# d! F) V7 D* U+ `
width:expression(document.body.clientWidth > 780? "780px": "auto" );
. O" t% x8 S7 f) b7 w2 G1 _
border:1px dashed #000;
2 @" u( @# O! J0 J. i$ ^
}
* z& G- ^& {' g4 H5 _
-->
- y' D. f2 L& a- g4 a, Y
</style>
0 m8 J( N) a% R
</head>
' w" R6 s) a& \. ?
<body>
% l- }9 v* P9 V( @7 E2 E
<div id="pic">
2 D5 h, k# k/ J5 ?5 `1 j
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
3 y7 z1 V+ `6 s6 D
</div>
; ?5 b$ ?. Z, O
</body>
* s- n5 b! s4 H
</html>
2 C+ S" t1 K3 M- \* d9 E. L# J
# [+ P: t' `7 T4 u8 |
百分比适应:
: E" F3 k4 ?( R# q
以下是引用片段：
: t F$ @' X+ _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; @1 B2 a) I; U% n
<html xmlns="http://www.w3.org/1999/xhtml";>
# K+ g- \4 w9 M y& L$ C6 `
<head>
) O9 U4 m8 a; p) ?' b/ \( y- H
<meta http-equiv="Content-Type" c />
+ t# l, e2 _5 ? d
<title>css2.0 VS ie</title>
3 a% `+ Y6 s* D" m' C: n! m
<style type="text/css">
7 d8 X/ ]* s+ N# x+ D) O- p1 [% ~
<!--
+ N5 x6 c: u* B# g& |+ f- {7 c
body {
1 |( `7 W9 y) w8 \ @! J& `
font-size: 12px;
. x$ V+ j# a. d/ R
text-align: center;
$ [" T+ p' D9 d5 l# I N& A0 j
margin: 0px;
+ e! m: i0 T4 e2 o
padding: 0px;
3 \2 z$ M# | g
}
+ {2 S( N5 k( h' J( p* Q/ J
#pic{
& n, y/ l) c" V5 M) w
margin:0 auto;
, ~: ~& p: o1 g% [
width:800px;
5 m/ r7 @$ H" E% u4 a! R- ~
padding:0;
* `$ b8 u+ |: V* E4 B, F
border:1px solid #333;
( Z% y' X" V$ k% q; L# N$ a
}
) H; V- M, @% F9 U
#pic img{
) S2 w I7 y5 V% n+ x$ B) Q
max-width:780px;
& u+ z# u1 G2 r3 A, |/ ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 b& ]- B( c' [/ I- C) Y& p
border:1px dashed #000;
_& X: w; ^" J8 K* M
}
2 ]# o( G. e/ `! t, I
-->
0 q* d/ y. O1 S- X8 ]' Y
</style>
! B; o0 T+ v! G0 B1 i) s
</head>
1 O/ d9 Q( ~' G8 V6 ]" D! R
<body>
* [; p/ m7 x, f: B) U7 L
<div id="pic">
9 Y9 w4 l3 y* I( K1 k
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
) s5 U8 }0 o; f4 Z4 b
</div>
( r( l' O1 Z" t. q
</body>
4 p: u- I2 U v' z4 J7 @& P- L' w
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
