标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
* _, h8 Z% n9 [' ?; A7 D" D) C4 \
关键在于：max-width:780px;以及下面那行。
% b3 G* e$ ~# g' }2 V& c
固定像素适应:
x. D6 B C0 n# d" h0 p" v- ^! }
0 s9 U: h7 {+ \) \6 ^; W! p' L8 j W, m
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> 以下是引用片段：
3 q8 u+ v7 P% N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
9 E. o3 z. K% y0 I1 b
<html xmlns="http://www.w3.org/1999/xhtml";>
X# u, @2 p. C! Y: L% `
<head>
% q& K! ]9 C; W0 }
<meta http-equiv="Content-Type" c />
; f2 B7 \; `7 U" Y! u. h; E5 i
<title>css2.0 VS ie</title>
3 s9 L' |+ r! y* G: p: v" P6 [* v! k4 Z
<style type="text/css">
4 _3 g3 _, q: z' \0 [: D
<!--
/ c6 S9 t/ V) {/ ~# l2 W3 g
body {
# l% p) U7 c+ E, p q9 N
font-size: 12px;
$ l$ u5 ]4 W% m$ y( I8 v0 G! {
text-align: center;
" d H! e' |. d
margin: 0px;
5 p) I: ?8 f; k; _0 @# [* s
padding: 0px;
4 P0 ~# U% Q; ?
}
7 ~7 c/ w' Y3 u* v- F% G2 s+ N
#pic{
3 o7 A1 ] w5 C
margin:0 auto;
" t8 |; S% H: f; \
width:800px;
U9 |$ Y* K/ X* P( d8 {0 D$ u- l
padding:0;
' C" s8 m+ n# ?9 j
border:1px solid #333;
: L8 P# y( `3 u. U& Q
}
! W+ d; s/ q$ g7 a5 |
#pic img{
& r5 [9 w# {/ |# y( B+ E7 [7 S3 t
max-width:780px;
. y: A Q8 J1 j1 y7 K& I' Y r9 a
width:expression(document.body.clientWidth > 780? "780px": "auto" );
" w% m* W, v# F2 g
border:1px dashed #000;
/ b+ J$ r. K& y1 P+ z
}
* ?$ i- A* M: g2 |5 d
-->
) C: U; ^. ?" q: A7 W& {
</style>
* Y1 ?0 e9 q7 j3 ~, F* z
</head>
% W9 S& p0 m: i/ {# V3 b6 T1 _8 a
<body>
% Z* `! i# x9 U* k: e8 Z4 D* A) A
<div id="pic">
" n" m5 h4 T8 W
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
& K \0 q5 L: ]' {3 [
</div>
: o/ P2 y5 v0 L7 e
</body>
% S- h9 ]. Y/ a7 l6 o$ Z. @
</html>
% j0 |3 Z% W; B! a/ b" X
( e& Y& g) x: X5 `9 p
百分比适应:
}& E# o+ P' x$ {, _ E; O
以下是引用片段：
( _2 N( `* ?7 y4 I1 v, x+ \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- _0 f3 P* b* Q2 _9 P# `" w) c
<html xmlns="http://www.w3.org/1999/xhtml";>
6 s# [+ X. Y* S6 T0 ~4 U1 e7 [8 a
<head>
5 C9 \! z |* k# y* \* f
<meta http-equiv="Content-Type" c />
" b( Q* y: l1 t* T2 `" X1 @( f
<title>css2.0 VS ie</title>
3 \ |) I" e# U4 d' ?
<style type="text/css">
# X( S& y. k2 [+ @& c! ?: z6 t
<!--
3 l* o! b- u0 F$ W+ q2 h$ M
body {
( U# k; A+ E9 [4 O7 f
font-size: 12px;
9 o4 C/ D7 j5 i9 q! l
text-align: center;
4 Y3 I4 y/ j, t- x, @9 N0 T
margin: 0px;
% K( d; G& d/ g& j5 l
padding: 0px;
/ D2 K/ G6 t$ L6 ]/ P7 [
}
& S# A, r/ O4 I \+ l8 n: D
#pic{
) Q; x, }4 f9 q p T5 K6 v
margin:0 auto;
( U# C8 n' x ?. P
width:800px;
! {0 G+ [3 V d/ W6 q2 Z
padding:0;
, ^. o7 T+ P, U; I
border:1px solid #333;
# E3 c/ M) N' \1 Z2 X2 e, x- b
}
U; _/ l( t! b7 M M7 e
#pic img{
7 o3 w2 N6 ^& r" b
max-width:780px;
4 q8 t, b0 V, j, C* {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
1 M0 z0 Z% h; \2 X7 B/ M5 N. O
border:1px dashed #000;
% g Y2 E; d3 i# D4 }$ ~& M
}
! s& Z- a3 \! d K6 t' h1 g. N
-->
/ N( K8 o' w- M" B
</style>
; d, \6 H& v% f8 @9 n5 ?
</head>
! \, e3 N2 ^7 [1 _" Y; u
<body>
* r6 q" [. h9 ]* D
<div id="pic">
$ s" E0 W2 [1 `6 S
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
" ~. S, s5 t& Y: o4 V0 ]" w
</div>
# d1 j8 Z% v0 {2 ~
</body>
! }4 [$ U8 ]3 u- C D l2 Y
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
