标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& y: {5 h$ ~, `0 u8 ]
关键在于：max-width:780px;以及下面那行。
, h% z& V- u; G2 X, \
固定像素适应:
3 O! e6 `- U, w T/ C
3 p, v- ^9 x. r% d9 n/ 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> 以下是引用片段：
1 z8 L3 h8 ^6 i( Z6 S, o
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
- i f# e" o, c( K. M$ A
<html xmlns="http://www.w3.org/1999/xhtml";>
' E! |$ P8 k. _& S0 t
<head>
+ z3 `& d. I5 C3 Y T
<meta http-equiv="Content-Type" c />
# [0 F' v3 P& C( C5 J# {# U( v1 E
<title>css2.0 VS ie</title>
# A7 w) H$ d4 z1 J; \/ m4 W, v: H
<style type="text/css">
6 h) @9 n; ?9 B, n$ P+ `" \7 B
<!--
/ }# h* z8 `" V2 N5 l/ x
body {
0 z1 R8 ^1 }' D: O' M
font-size: 12px;
! T# T, U/ O; W
text-align: center;
$ P5 q8 f1 N1 m/ v
margin: 0px;
" c- D6 O* X/ C- O
padding: 0px;
1 _. m9 `; h! C5 d5 r1 N" p
}
% i! q% k8 M) b; G$ k
#pic{
! r% J" k k) s* }4 W8 }: M2 L4 M- E
margin:0 auto;
9 B# `; r# k3 ?4 q0 r, U
width:800px;
5 @: c5 G/ H7 O2 J+ G3 }% ?+ c
padding:0;
3 m3 p. l2 D Z8 M$ E3 n+ i
border:1px solid #333;
7 Q2 b5 f/ p9 I/ n
}
9 M; Z) b/ i6 o$ g
#pic img{
( M$ M+ T! R6 L7 L6 m0 a
max-width:780px;
2 A$ P5 E6 P! _3 Z/ X
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& k& `1 ~) b5 B m5 H; y5 ^3 L
border:1px dashed #000;
7 j/ V; R7 D4 [
}
# D4 W8 |. _7 r3 d
-->
; ^! g, S; P$ d3 ^% o
</style>
4 t) Z: V, [. M
</head>
+ Z/ a% z4 u4 s1 Z9 z
<body>
- S$ E) o1 h( B; G- n- T' q
<div id="pic">
4 x7 z t, E- P1 R' r0 u+ T
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
! C7 l; n" M+ y, X# m; Z
</div>
9 w) d3 M( t" }' i6 X- ?. U8 O
</body>
$ s) {2 L, l; @7 r6 |4 K
</html>
# G; H a' y) v) i- z
( w2 X% ~3 b) t* y5 K2 n; w. g8 L) }
百分比适应:
# m1 j: N5 p" G5 ?/ J8 n4 D
以下是引用片段：
5 y* _+ e. C8 y7 d2 l
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
2 d$ d9 k1 g) t! f/ R2 m8 q: p9 A
<html xmlns="http://www.w3.org/1999/xhtml";>
) h X( N' P$ Q
<head>
# ?, M$ c& W8 s& e) f2 M
<meta http-equiv="Content-Type" c />
' U9 |0 i1 w5 _: L5 M
<title>css2.0 VS ie</title>
# \2 W$ M3 P# n4 o
<style type="text/css">
7 A- ]! i/ k5 B* W9 M7 `
<!--
; n. Z, F) Z, @* z# u) {5 a
body {
" T; S$ W% f7 w2 S+ Y
font-size: 12px;
2 T8 J: f& V6 L: s! _
text-align: center;
& N* o! U+ x: w$ D- g, S
margin: 0px;
! x5 B# p M' B; \- ]8 o6 ~8 i) x
padding: 0px;
' ?' k; d# D O4 G6 S' `4 F; O
}
( t3 a2 l' w9 @" W. o# E& L
#pic{
% g! W$ i7 ~% O. G: o
margin:0 auto;
u1 H/ r9 f1 l6 Y9 n( V
width:800px;
7 I- f M2 \& c$ k& {3 ] v
padding:0;
9 E/ u, _' L& f& u; @. ^3 r6 `
border:1px solid #333;
2 l/ A. n! Y6 s u. E9 p; J
}
0 E R& b1 `: h1 H! I
#pic img{
8 z6 Z9 y1 ^/ a4 b( A S
max-width:780px;
# p5 d& A# ~ v" l+ y1 u4 C; j7 ?
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 f+ a. x$ u Q5 d F- D
border:1px dashed #000;
% I- G0 p7 ]) b* {
}
0 d; I1 q# C! H) a X% k) i% M
-->
6 d3 L0 r* b& ?7 M6 V! M
</style>
! _% [1 F9 B2 C, [
</head>
# O8 l& H2 R6 e8 L. p% V" u' {/ h
<body>
8 f% g9 z5 N% H1 t+ i1 s
<div id="pic">
9 C8 L" E& R4 J6 `/ v5 Y6 r
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
% \- F, ?' @. i, ^/ c- D
</div>
" L* ~: n1 f. p. Y5 k% U" \# @9 |
</body>
/ H2 t Y& {4 ?* H$ @
</html>
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
