标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* y: m! Q% @: m [8 c3 C) o
关键在于：max-width:780px;以及下面那行。
! R0 G1 j) x* @7 Z
固定像素适应:
4 Z( R8 c6 N9 G2 W/ y% r5 ?8 t
5 }) S g, X4 T. X; w4 u
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> 以下是引用片段：
9 w3 r6 s R, m6 n [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' S) \2 h6 E4 h ]6 K
<html xmlns="http://www.w3.org/1999/xhtml";>
) {( M4 h. x8 ?& }
<head>
8 I/ y8 O( t1 P3 O0 i8 W: ~
<meta http-equiv="Content-Type" c />
7 N5 Z. j) n2 ?* J! o4 V+ e
<title>css2.0 VS ie</title>
9 M3 U" {2 d$ y
<style type="text/css">
; i' a& ]$ T0 E( g2 J; m+ _4 G& l0 M
<!--
# C# G* \3 Q* P) s H
body {
. |1 _. m$ U( R1 f% p" }% [7 T
font-size: 12px;
) W, k* f3 z# V' @0 ?7 T/ C; ~0 x+ p" O
text-align: center;
/ |4 ^1 f( \( x/ L3 K, H
margin: 0px;
7 W( t* L* o+ s" @5 v
padding: 0px;
, k- }: F3 c$ a' M: F9 ?" a+ B* I; ^+ E
}
, x0 z( C- x- F% A, ^
#pic{
* R, N3 [* R# l) {( D+ k
margin:0 auto;
) S# R/ @5 N: }9 t2 P3 ?, m: q, Y: w
width:800px;
/ i. ?& s7 z9 {
padding:0;
& C' O2 \2 r7 }$ {
border:1px solid #333;
- z# h; j4 D2 _, c. i
}
5 i6 Z' \; C4 {; V
#pic img{
2 u) S" H* ?0 z! O q
max-width:780px;
9 n1 d! G8 W. [
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ |, h' o, ^ C6 o
border:1px dashed #000;
4 V& h9 [; a) @ t; ?* g) V; j# C
}
% B1 `" \( A, m$ g, {9 x
-->
. O! Q8 x# {& D# F7 b9 V9 N" _
</style>
1 e9 Y7 O. e s( o
</head>
; C( [5 D% `0 W9 x( @
<body>
& J" [8 ?4 `$ o, W* i \" w. n! A
<div id="pic">
3 k7 `! e4 {1 S- l
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
e4 I8 W2 n9 t( o3 B
</div>
( o4 ^5 D& `8 Z! i- A+ o
</body>
8 O4 q2 x$ M0 r+ s
</html>
" ~& e( F& @& p3 X
# x6 Y* n5 n4 L) \2 @+ J8 `$ w
百分比适应:
9 O; C. U: o3 ^1 R: g1 {
以下是引用片段：
# p/ T8 h7 ^$ g5 @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
' d! \: J* Y9 u6 L/ g
<html xmlns="http://www.w3.org/1999/xhtml";>
3 Y1 j9 s# r1 B* X
<head>
! u* J. E" t$ M. }4 J: f3 X8 Z' w
<meta http-equiv="Content-Type" c />
! ~9 E) b- j6 B$ B, C7 y
<title>css2.0 VS ie</title>
& D) H, _ d. D' M
<style type="text/css">
, n! k+ g+ u3 b6 R+ y
<!--
2 P" m9 m% X( N5 ?5 I& b8 w6 t/ }
body {
1 \/ o* ?6 v# f- V H0 f: p* b! H
font-size: 12px;
0 N6 o: L1 e) P8 s4 G; S( v$ G
text-align: center;
9 F- B8 Q7 k4 W
margin: 0px;
$ w, W5 {& u, X v
padding: 0px;
& k) |' O/ D9 ~5 |# s7 k# S
}
1 u( W2 F8 o* \! Y# j1 a& C
#pic{
! w4 j9 Y" H9 S3 B# r
margin:0 auto;
* @; w S5 z7 e7 Y/ e- L
width:800px;
" l9 x4 \) S8 P% b
padding:0;
0 _+ ]! M% S) |
border:1px solid #333;
& f4 p" Y& \( e# x9 R
}
0 u: S1 {# o( n6 N3 b
#pic img{
! ]- u; Q/ H- f0 r4 j# N7 D
max-width:780px;
, B4 h9 k" X% E% ~- ~6 _9 X D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
9 x- T! W) `8 ?0 l) v* r P7 z( E
border:1px dashed #000;
d0 g3 ?7 |4 _( g6 ?
}
" N' d! P8 ]/ a- a5 U. ~6 E
-->
! O7 L9 t0 e/ t8 B$ M* ]! M# A
</style>
3 Y2 u/ w' ^* e7 S# j9 ~& d
</head>
0 e! U$ k1 p; H( F
<body>
5 N/ V# x, L8 W; ]
<div id="pic">
# J# \3 t$ t& t, a% h' {3 L! `. I
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
+ e9 d8 S! u/ s
</div>
" L n0 z' Q, W# @2 e1 y( N5 r2 V
</body>
$ @, J7 E: w6 L! X& m$ D- Z3 I/ e3 u
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
