标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 G7 h/ [' c# _9 W+ T
关键在于：max-width:780px;以及下面那行。
- U& y9 r/ G7 T m
固定像素适应:
3 D8 ?' S w+ l/ v5 J" ]3 f
- n1 M. j8 D7 T+ d- ]1 E5 H/ B; w
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 k9 f5 \0 [4 c! r
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; Z- r. A$ e0 Q0 r+ a6 ~
<html xmlns="http://www.w3.org/1999/xhtml";>
j) r" R& u, V( k( E C S
<head>
0 \ F' ?/ x. A1 H* c! p
<meta http-equiv="Content-Type" c />
1 T9 ?& K0 I R& E8 c! u. P' @1 |
<title>css2.0 VS ie</title>
5 \6 G6 n6 {4 [, z5 j+ [
<style type="text/css">
* W7 E/ e3 I+ n3 v
<!--
8 u' G- H: j" p# d6 k% J
body {
% p2 p' R1 ^4 m$ @8 X# s. t
font-size: 12px;
6 ?1 T6 p5 s( G3 ~; x
text-align: center;
1 i' }1 ]3 T0 G0 A
margin: 0px;
m8 Z- [/ O& {2 h
padding: 0px;
) k( g$ ?8 n, `- K* B
}
, O8 m; R3 z8 g
#pic{
6 x6 L1 E2 C3 A$ O% w
margin:0 auto;
8 G1 L- n) Z& |
width:800px;
+ y5 j7 ~* P( h! f
padding:0;
4 Q! X- P0 L4 c" D8 K& T/ V
border:1px solid #333;
$ q7 k2 ~9 {1 P8 d3 V2 z
}
8 N# R- E t6 G5 h: A" i
#pic img{
& e# J1 H% ?- V& Q R/ w9 D5 s% E( n1 z
max-width:780px;
+ P& m# |6 D7 J- v0 ~5 v5 b$ U
width:expression(document.body.clientWidth > 780? "780px": "auto" );
! Y4 A( T; B5 j3 d2 {
border:1px dashed #000;
& V6 J* u, \$ b" f6 f
}
+ h- G& u4 ]+ f& I5 {
-->
% p6 X. J7 z6 _" R8 H \1 H
</style>
4 d1 e- ^: p& m' F( n! e) t! r
</head>
- B5 U, K! `% W1 Z1 a
<body>
# S# d. m v0 \# |! r" b
<div id="pic">
& h) v9 m+ V9 f7 {/ b
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
0 i! B( F/ |- R
</div>
) ]. Z& `! I' h* G& F, `$ q8 j: a
</body>
5 _$ Q* p) G9 W |
</html>
" S) ^6 ]2 S+ S$ t+ |& Y8 V' O8 {/ k
3 E0 l3 s' J/ f' N+ C( T. H
百分比适应:
1 S! t* ], t; j- f% R* J
以下是引用片段：
% F% m9 a. o% d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
7 u% [# G' E) q s1 m
<html xmlns="http://www.w3.org/1999/xhtml";>
Z$ u) `# O2 p6 a
<head>
+ }3 b$ L# I3 r+ S1 o
<meta http-equiv="Content-Type" c />
- f; N: ^) @. [3 m2 r
<title>css2.0 VS ie</title>
c W2 q/ c# D. C( k4 r
<style type="text/css">
3 j$ K9 Y1 { x; ?9 Y2 H
<!--
0 ]4 Q5 t, W) a& s
body {
; @$ ], D3 C' G- W
font-size: 12px;
# W. Z8 q) d& V: C
text-align: center;
+ y5 n8 T2 v) g! g2 M* ^4 R
margin: 0px;
) ]# B" \# J! o3 C3 m' }$ j8 v" C
padding: 0px;
5 Y/ e0 k+ Y/ f9 y3 e4 q. ~5 D! g
}
' @! R+ `4 q i5 M: e: \) j0 R! E
#pic{
0 b% x: l3 N* O+ L4 U8 V
margin:0 auto;
# w3 }2 b. u1 E# F8 c
width:800px;
1 ~9 ]5 b# C! T% ^" g4 J
padding:0;
8 N5 e3 |/ H( h2 u! s
border:1px solid #333;
; \: U- B" I: r2 o
}
% S2 x1 |6 [7 q& U. A1 }. A/ |! v T, f
#pic img{
% ?% R" n6 _/ e" [$ G
max-width:780px;
( P/ O8 z) L, E; D
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
8 H' A$ F. G" u0 @9 u
border:1px dashed #000;
% ? M7 R3 P: C" w8 E# D, V
}
6 |$ [1 ~- X- d
-->
, S. ~9 y) K: M1 O' U3 \. w9 N
</style>
6 }1 n) w2 J! F+ S* |
</head>
7 l7 ~ k/ k# U, m* T/ {
<body>
* E5 ]6 ^3 B) z) ]9 z7 Q
<div id="pic">
# T- P+ E- ^+ n' A$ C
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
- g0 b6 t" q* l1 w; r! u3 _
</div>
# t# [( T4 q1 o2 E: @
</body>
' V; R+ K) |7 D) v7 G# r7 f
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
