标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
/ T5 r. C% [" o. D/ J' n
关键在于：max-width:780px;以及下面那行。
$ D8 P+ z0 n& u
固定像素适应:
2 W; i7 Q: }4 }. Z4 j4 ?( v8 q9 s
. e9 a% E* Y+ I! X/ l% }/ n1 G/ ]* Y
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> 以下是引用片段：
& [/ D" H. `- f# {* P7 x* V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. w" B0 D7 ^3 x
<html xmlns="http://www.w3.org/1999/xhtml";>
2 X$ S- m' x! N# d
<head>
. g) ? [; T+ V# E
<meta http-equiv="Content-Type" c />
" ~7 R8 I k9 f& P2 g/ q. D
<title>css2.0 VS ie</title>
( G7 W/ K( T/ [2 v, Q
<style type="text/css">
$ c( {, `: M0 H: E7 _
<!--
9 z: T+ y" o6 U9 J4 a2 R! a
body {
# E5 T) i6 u+ D1 q7 e3 \1 Z
font-size: 12px;
' D7 \8 y4 V3 i* l: |
text-align: center;
, M( ^4 g# H5 E% n
margin: 0px;
# s V, G7 M4 z; O" ?
padding: 0px;
' E2 K' g1 N7 V$ Z" N; r) V
}
" C8 c" @* J4 F' Y4 i# o
#pic{
, ]+ R% X, W0 D( [
margin:0 auto;
O G/ q# t3 L* c3 z2 R' ~
width:800px;
* a$ ]9 |, Y- c! n
padding:0;
7 f4 u3 n- N9 I; c/ k
border:1px solid #333;
$ G8 F7 ~& G* B% ]( C
}
4 B7 s" S4 M% K p( M2 Z
#pic img{
" o% x5 C0 ^0 ^4 F( H$ ~* ?
max-width:780px;
0 t5 V5 s% K" v3 h! A3 W
width:expression(document.body.clientWidth > 780? "780px": "auto" );
1 {7 Y* B' Y$ w) y
border:1px dashed #000;
- P6 X. |, U, y6 e; T
}
! R* }+ ]! s8 Z+ Q0 c2 c
-->
* j; V3 x& q: k$ M j( m5 K
</style>
( K1 y8 g8 `+ S+ s: h
</head>
$ c9 ?8 m8 K, Q6 ^' g
<body>
" T# x- {5 d3 H d9 G+ A1 }) j
<div id="pic">
' @5 z: J, y$ v4 d2 Z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
$ W/ {% J% k7 G% W% Z
</div>
/ X" h, s3 q) U
</body>
, I, y2 U( l) C0 y$ A9 n7 N! ?
</html>
+ k! g* f& A" ]+ c' f* D! Y
7 I$ r; K/ k( ]- |3 ^" _( V/ w
百分比适应:
/ Y0 Q. Z+ a+ w6 D. [
以下是引用片段：
" a" L/ b3 Q& d- s8 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
3 y3 u9 C- D- l% {9 W
<html xmlns="http://www.w3.org/1999/xhtml";>
6 f$ I9 p+ _$ H" K' w
<head>
- u/ B# r1 [+ n4 N
<meta http-equiv="Content-Type" c />
% {; ~8 w6 Z0 P- p2 d4 C
<title>css2.0 VS ie</title>
5 f2 ~* S& q4 F4 E# D+ ~
<style type="text/css">
' M g. @4 L. Q) U! b/ p9 w
<!--
% t1 a* y' d/ u6 v$ b7 P
body {
9 }. T* A H4 {3 K' G
font-size: 12px;
^0 y+ k3 Y) H) Q4 q& g+ u' K7 d, a
text-align: center;
3 j, z9 U* U; Z, s8 P* b
margin: 0px;
6 A* O4 X4 K; X
padding: 0px;
, u2 T) z5 ~' e5 W) L. f
}
7 A$ H; H6 X& h9 f7 ^
#pic{
8 d) l; m9 N4 e6 ^* s p
margin:0 auto;
0 L& Y, V/ e( ~) z0 j6 _
width:800px;
* q$ y- t: d: r7 F: s( F
padding:0;
4 D4 R7 G- q- G, f: p& G# h- P
border:1px solid #333;
- b6 I P/ ?# b( X: N
}
' a; O0 V# Z( \4 j9 p
#pic img{
; p. {- `- P C
max-width:780px;
4 v! _% d9 K4 _. U
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
, @6 R$ W$ N7 e( y5 A2 h, `
border:1px dashed #000;
b: Q- g6 E0 ?3 i
}
0 I& o3 l+ m- r6 G
-->
2 X4 \7 R6 ?; c
</style>
2 N$ e5 p$ T2 w- V% {9 `4 S% }1 ^
</head>
/ X! A9 e+ y0 ?( U" X* i
<body>
) `7 Q \' ]/ u
<div id="pic">
- I. G- ?% a2 O T% Q `) x7 ?
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
9 ^( Q* Y; g1 \
</div>
8 \4 O+ L' g; k' N& Z* ]/ {2 T1 w8 N+ V. R
</body>
) ~" f9 G3 h* p) }
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
