标题:
在DIV下图片自适应的解决方法
[打印本页]
作者:
admin
时间:
2007-12-8 14:55
标题:
在DIV下图片自适应的解决方法
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
! I5 H+ D# d6 K# E: P
关键在于：max-width:780px;以及下面那行。
2 c- ^0 Y- Z: K6 I" g! E' g
固定像素适应:
& w6 @) I- H% W% R; v8 O( c
* j4 O: n3 x& K: c8 V1 g
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> 以下是引用片段：
, Z0 S+ D5 U% k) f/ @
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+ k# w: ` H+ @" R
<html xmlns="http://www.w3.org/1999/xhtml";>
/ u+ p$ V! V, ~" d `
<head>
- b, |9 Z( l8 Y2 T3 T+ s
<meta http-equiv="Content-Type" c />
6 b2 ]0 [. Q3 v X3 l
<title>css2.0 VS ie</title>
3 h6 Y1 K- t& N" n, ?! k( W) c
<style type="text/css">
2 A# j; b4 v1 n# i' j* g% \) q
<!--
* s, |+ @. b+ D
body {
2 b% m, Z3 x5 j3 J1 _
font-size: 12px;
$ k9 V% `% G: c3 U# P( R1 f$ m
text-align: center;
+ w* ^5 c+ L" r6 ~$ ]
margin: 0px;
6 L, Y9 `% {, C6 e w
padding: 0px;
x: X5 p, N9 i1 ^9 @# p
}
Y' f" s0 v l, Y i# q+ u
#pic{
( z) g K) Y U5 p! t
margin:0 auto;
" @3 }& L; Z# q7 L$ W+ C! e
width:800px;
$ u7 d$ t+ i) R
padding:0;
5 Z7 E1 k$ w5 k* q, g) J
border:1px solid #333;
M: J: \6 s6 ?# Q
}
( P$ F& L% \* @0 L" \" M. x r8 M5 a0 Z
#pic img{
3 V' H/ M+ X6 u! s% X+ W
max-width:780px;
, c, L! |( x E% X, q7 G# {
width:expression(document.body.clientWidth > 780? "780px": "auto" );
' E7 k1 s+ E; y1 p% b
border:1px dashed #000;
: U3 H* W* @2 u- M* H
}
& C" J2 ?8 y- c) Z; h Y
-->
b e' k$ y; B& {' S
</style>
% e5 z2 ?' \. z' [
</head>
' F: E4 e7 y) B
<body>
" k5 ?$ U- Y* B' @' F! L2 u/ D7 l
<div id="pic">
3 V# p0 _0 ~- `1 i) p3 z8 H
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
4 c. _: J' C3 [) m* C
</div>
! \# `* ]& {! Y7 T8 L1 u) o7 Y
</body>
W9 d" o% k. q, e
</html>
* f/ X# [; d7 B3 Y3 ]* B
6 A( V V+ H" k5 R
百分比适应:
, E) i. E- a- W+ T2 z( B: C3 e
以下是引用片段：
5 Z# H2 z$ Z( ?/ |7 R2 u% ^9 D b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
1 y2 N. t* \' k# R
<html xmlns="http://www.w3.org/1999/xhtml";>
T" k2 R3 a8 |
<head>
1 p, o( _* N1 S: R, T) P5 V
<meta http-equiv="Content-Type" c />
6 q1 H* {0 n& Z. @* Q
<title>css2.0 VS ie</title>
, K: R5 Y; G- r9 o( D5 Y ~8 H
<style type="text/css">
' g/ X9 M }# p# z9 S
<!--
- f2 s5 y& D& |( Y" E
body {
3 {8 a0 \( f, }0 b$ ~
font-size: 12px;
1 i; {) H: n+ @+ T+ N7 h- W
text-align: center;
; P' N1 g2 _3 i# E5 o
margin: 0px;
' J1 Q; |# F# j7 ?. H
padding: 0px;
3 X# _: D/ q6 m6 ~6 N
}
4 L' U. N* a6 B |2 c
#pic{
: E6 x$ A) e/ t; ?
margin:0 auto;
& F) B5 u1 E2 j0 x; N" G0 Y
width:800px;
) i% O, m$ O! `; Y+ O; ?2 `( d
padding:0;
+ H7 f) }, j- Q8 h
border:1px solid #333;
2 M+ k: X: h# ^0 t
}
5 Z3 Y8 Y6 r/ `# O+ M' S
#pic img{
7 r) S7 {# X7 ]% [7 T3 p# J% u6 M7 \8 M
max-width:780px;
7 [. b3 r1 ]! U9 n# F6 Q8 p) S
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
/ k. ^6 Q1 V( ?* C! W- C2 ?
border:1px dashed #000;
1 @% M+ W" m: `0 |
}
2 @( i: O0 e" ?+ p: s" ]
-->
% \9 @, C) |" {" t
</style>
2 ~) P$ W( |: z4 D" u
</head>
$ ?, z$ A, V5 \& x; X4 m0 F
<body>
- M; q- Y6 {0 m! S( D; D \
<div id="pic">
' c, C3 l% k8 R6 h% y e) z
<img src=
http://webclub.net.cn/images/Beijing2008/logo.gif
>
' ?8 P0 H: q, R9 ]" q0 j- ?
</div>
( x5 }5 M2 K+ H$ s
</body>
% h9 i7 U# W+ P
</html>
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
