标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 T0 E& r7 w1 n5 I& a
关键在于：max-width:780px;以及下面那行。
# n, P: `8 N4 u8 O' m3 \3 ^
固定像素适应:
! K% u0 v# e9 ]1 g. q F! t7 y
6 ]: g5 R4 D E4 P8 p6 \9 Q
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> 以下是引用片段：
7 {' g' n2 ~4 L& S9 k/ B$ _
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" k2 O5 t( u; i
<html xmlns="http://www.w3.org/1999/xhtml";>
% J: n- C8 k' |2 ] G
<head>
2 W7 ~# D/ \' G1 G) A
<meta http-equiv="Content-Type" c />
& |# a' P1 i) V7 H5 X" F1 u5 Y% k
<title>css2.0 VS ie</title>
% S! n, I3 u' F
<style type="text/css">
/ d- v+ \4 k3 y$ j& `/ S F7 \, ~
<!--
7 w6 D { ^4 U* S
body {
- U+ ~8 U" M2 w* {# @+ ^+ b
font-size: 12px;
- C) m: b7 A9 E( ?- ~
text-align: center;
7 M4 \0 W3 w. B, H5 M: Z& r4 U
margin: 0px;
7 U% |* i% s! Y; r7 F U6 A! a
padding: 0px;
( C. M; ?$ L# s- k
}
- {$ x- e5 m. L4 h8 L& {7 \! H
#pic{
2 p# Z$ g' Q3 N5 v" L7 g4 f
margin:0 auto;
4 I& H6 z; Q/ ~* p3 S0 a
width:800px;
9 P3 m' A% Y) |- ~
padding:0;
+ I1 J- n/ K/ Y- n& w! Z
border:1px solid #333;
; I$ Y' V: X' e
}
6 Z( ?7 X! ]1 ~$ l0 L5 Y& ?* M
#pic img{
9 f7 S' N* F* A6 |. O0 W+ p
max-width:780px;
! O. p4 `& Q$ I$ q
width:expression(document.body.clientWidth > 780? "780px": "auto" );
+ W A; _2 X9 [2 `
border:1px dashed #000;
" b6 g- Z4 n) m1 {
}
8 t7 x2 l" O+ ^6 a+ t
-->
. q8 v: \5 j" D5 j) U+ y0 O3 }- o2 z1 a: V
</style>
8 i- f9 i8 M; Y. o
</head>
8 R& V9 H* m% e" _
<body>
& @/ E" `% Q$ t9 ?
<div id="pic">
6 g# O, H0 n& t) R' W k. q
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
/ } o* U0 l; H
</div>
# m4 E- l6 f) u! ^
</body>
B! H6 l0 ]8 p% [+ z. B
</html>
7 a2 ?3 A# ~; H1 r1 j: z- u
; Z7 M, {& J7 ]1 i, `
百分比适应:
F/ ?1 _+ ^0 J$ n
以下是引用片段：
& v7 s' \" C7 Y( y9 k! r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 T# n0 b5 x$ ^+ l
<html xmlns="http://www.w3.org/1999/xhtml";>
/ u, Q7 [1 j& y& L: {$ D
<head>
# \% }" P* G6 ]! D1 P* [
<meta http-equiv="Content-Type" c />
1 B$ k+ h h1 n% V
<title>css2.0 VS ie</title>
- i" S4 k2 S3 @- ~
<style type="text/css">
3 m D# v2 K2 D$ ~. K+ d5 W% z% ?
<!--
' O3 Q8 [' L6 [* h1 {5 @; E: y
body {
) d% H. A, J( F7 ]
font-size: 12px;
C I+ ]6 I/ F9 o
text-align: center;
6 @" v7 r" A! u8 T; t+ O Y3 h
margin: 0px;
4 I2 z% _. j3 g5 B; Q& h
padding: 0px;
& Q/ C+ [3 \, n3 L4 o
}
5 d H ?2 X3 X# v$ n+ M2 O' t6 x/ [
#pic{
, h. }4 d" J9 w- V( L, T
margin:0 auto;
' w6 ~# l! M# ~; z, \ W
width:800px;
8 B) Q' u) ^& c" r4 I: I
padding:0;
* ~2 B: c7 J5 H5 O$ j
border:1px solid #333;
& _. m/ |" D! e! D. s/ c/ h
}
0 |! k: x3 X; I# }# J( p
#pic img{
w- K1 [( |% l- t& g% }2 Z% k/ `
max-width:780px;
) A! c: {5 b/ K4 G6 x# P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
( F6 w: u t' i+ c
border:1px dashed #000;
y' [9 p; \# {( {2 \5 Z
}
8 b6 t+ c1 M* Q1 j
-->
1 m% S8 y2 P2 ?6 d
</style>
7 b8 w! G# I5 Z$ e& F
</head>
* G) D9 m, r+ Z
<body>
3 o% p6 {( v$ d2 T
<div id="pic">
2 g* S5 a! A+ f& D. G3 J& A0 f
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
2 l# ^. k3 V) S& V( `! G
</div>
+ ]/ [# s; |! o6 Z: Y! [
</body>
0 y! ?8 @( G ]1 J: X p9 i
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
