标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
2 t3 `& L5 ^( ^( M# v
关键在于：max-width:780px;以及下面那行。
; n9 `8 Q9 R1 `& r& n
固定像素适应:
8 v2 o+ k( v3 T f3 U. R5 {
) J0 h! Y' O7 p3 Y4 S" ]
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> 以下是引用片段：
9 j' E# L: ?, G/ i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
N7 J* z+ X% m: m2 Z! S S
<html xmlns="http://www.w3.org/1999/xhtml";>
" ^2 D$ b; W) p) i6 d
<head>
; ^8 w) V8 T8 ~/ l
<meta http-equiv="Content-Type" c />
: O* F% |6 p; K9 U b6 A8 m
<title>css2.0 VS ie</title>
8 a' O9 F Y4 w& @$ M7 e; S7 H
<style type="text/css">
/ j+ M% K& [5 s7 R8 X n/ f
<!--
( o" d0 N" Q, r2 i6 f: x( o
body {
' r- a+ `# }8 o% ~1 t
font-size: 12px;
$ P, ]% ]" K9 l9 l
text-align: center;
7 i5 b& t3 O+ Z8 N/ Y& ^' p1 X, @3 [
margin: 0px;
$ M3 X. }# N2 N4 J1 y2 _3 s
padding: 0px;
- V+ C8 {7 S6 e3 l1 U! p$ p4 ]( m) Y' F
}
, s" d5 E# Q H/ u' \! K
#pic{
" b0 C1 W }( M- Q" o; j/ |8 X3 X
margin:0 auto;
4 n# X/ O0 Z/ z2 E3 c8 G
width:800px;
* L; E" E+ G ]& b
padding:0;
" w/ R( `1 a+ v& v9 [$ n+ M+ C
border:1px solid #333;
! h1 y K) W, h0 C& f7 v
}
; Y; D) C8 j/ Q9 A
#pic img{
- g: U. V3 v% g: \( @& h( ]
max-width:780px;
% z4 ]) _5 e5 Q/ y! D& q6 G
width:expression(document.body.clientWidth > 780? "780px": "auto" );
5 I4 n, r/ V5 ]: Q3 T: {5 U! O* u
border:1px dashed #000;
9 U9 v' a/ x3 G v; w. u6 `7 ^; D r
}
- T3 n$ t+ _% [$ T1 g
-->
+ Q5 I" T. z# F6 j# G
</style>
* u& I c1 U& @2 }" l! Y8 S
</head>
. V. M6 l+ ^# e
<body>
+ s* p$ E. q! k1 z3 q0 Y
<div id="pic">
$ d$ l: K7 V K1 a5 [
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
: `7 t* a$ S) M$ `& I
</div>
$ C$ r, e2 x; Q1 U
</body>
, F) C) P3 A/ s
</html>
4 R* `, ?4 D+ Y j) |8 A, e
% `! R) R& t# C0 U% {
百分比适应:
l5 t! X1 b5 }5 }
以下是引用片段：
9 k+ S. \% y, g$ v+ O# |( X6 V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
, E7 D% S6 O2 y2 s! N. a4 e0 w) O
<html xmlns="http://www.w3.org/1999/xhtml";>
% t0 H D4 ^) C6 V( l) k$ i
<head>
4 U& K( L3 T& l0 b$ L+ z
<meta http-equiv="Content-Type" c />
8 \0 ?+ j9 G* V) ^6 I
<title>css2.0 VS ie</title>
% x p4 {" {8 V4 [3 s4 o" w
<style type="text/css">
" [" b" a* s, K! Y P
<!--
G6 k8 ^' d& N' ]
body {
9 ?. P4 B$ L' n- P% |/ T* r. t J# q) [5 q
font-size: 12px;
. j' B% Y( F. Y
text-align: center;
1 w1 R- P/ d0 l, j' [( x
margin: 0px;
1 d* h& l6 e, z
padding: 0px;
0 Q7 U7 C" u+ E
}
7 ~( C0 R0 N8 H! `
#pic{
7 f9 }: ~* U( L L. [ r2 W; [9 z# u
margin:0 auto;
9 Z1 J; V# ^$ v3 n1 p1 {
width:800px;
" t& C* c- w" A3 T2 [
padding:0;
- V" v7 t( S) p) l4 g, p) u
border:1px solid #333;
. j' k, B, R# c! y# O
}
( C! k. C( P+ u3 Z$ y/ @
#pic img{
, A( O- v) W0 T( m+ G/ k
max-width:780px;
! L/ @: F" C, ?" m: [% b7 m' {
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
& X# {( L$ W n A7 G9 f
border:1px dashed #000;
% E2 @8 h+ n* i: b. E
}
' d5 b7 ?; W8 U% O" e* L& |
-->
0 F4 D+ Z# s- p/ T! f: s/ {# b
</style>
5 i5 A2 D8 @. A/ l! A7 c* C% i4 X! ~
</head>
# ^) d. I: ^, B* ]
<body>
" K, A$ ?* V# m8 r
<div id="pic">
; w3 N O+ s5 `/ H0 l+ J
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
8 H* p1 o8 l/ t& r! ?
</div>
- d7 w* V# \, o" t+ [
</body>
2 G4 a8 B' l/ x# w0 U! c/ r5 Z
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
