Board logo

标题: 在DIV下图片自适应的解决方法 [打印本页]

作者: admin    时间: 2007-12-8 14:55     标题: 在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
. K- C$ p$ f! u/ b0 t: n0 }5 b# i( M" h关键在于:max-width:780px;以及下面那行。; Z+ q/ w# {& K! W, Y) w% L
固定像素适应:# C& _3 B" N: H! M' s
5 V) [+ n6 Y$ H/ j- h
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>  以下是引用片段:5 V! M" z8 Z' z! |7 E9 j* o; u1 G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ; \' s) l  }1 Y( @
<html xmlns="http://www.w3.org/1999/xhtml";>
3 W, y: `- b( F& x% X<head>
$ Z5 i* i& j7 G( v<meta http-equiv="Content-Type" c />
9 D- M' D$ o& {2 o  t3 q; i3 u<title>css2.0 VS ie</title> 9 ?/ k. b/ z+ O: D; m% E
<style type="text/css">
3 q. r; {9 @; V! ~$ H6 o/ u" a<!--
# v3 X' Z9 E8 [: _body {
7 P4 ^: F0 J+ q' f9 Afont-size: 12px;
+ I+ A4 x7 Y% Q& Stext-align: center; 3 ]2 }8 H. i& E
margin: 0px;
0 I: q/ h# t6 H6 Upadding: 0px;
( c. P# V. O* ~" a) [}   u; j& y# y% e9 f" F3 m
#pic{ ! D9 S8 o9 E& \! r9 c- M
  margin:0 auto; % e0 u2 U5 K! \# B
  width:800px; 7 b, x$ c! e1 v( T
  padding:0;
5 u% i& }" E# `6 s$ d# f  border:1px solid #333; # Z7 b% q, c7 t# H$ M) H
  }
- ~2 ^2 Z/ h* d#pic img{ ) R2 F6 C8 I4 p( E3 A$ e) a3 g" ?
    max-width:780px;
4 Q. G, X  Y# U  W+ iwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); % {5 ]$ \  b# p) X7 ~- H* P1 v7 a
border:1px dashed #000;
4 w, _: @$ n1 w8 Z. o0 F}
* ^9 t+ T. @+ e' I- L% s+ P-->
/ D1 W+ _+ P$ G! c</style>
4 a5 ]( R4 z! E/ e! @& {. p</head>
+ g$ F# }$ P+ [- x6 v<body>
$ i7 K  C# F3 s8 K( X<div id="pic"> 9 {- Z* a4 e% q* d* m% H+ D0 X
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> - i1 I3 z3 w4 U( K
</div>
1 e2 a6 E! z4 H2 B</body> 7 C) u4 b, B9 `3 }) T6 l
</html> , p, a; V& D) P7 Q+ X
5 k( n  F1 L2 T4 ]9 X
百分比适应:; M9 o' l3 A. r1 q- O
以下是引用片段:' a1 ?, Q1 N& D9 I( k
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& C% P0 Y/ @8 |  Z; T5 {6 Y<html xmlns="http://www.w3.org/1999/xhtml";>
; a2 x6 V( t! Z2 j* O4 L<head> 6 i: K7 c5 D/ t+ T
<meta http-equiv="Content-Type" c /> 3 n/ M' R+ R& E, p* r
<title>css2.0 VS ie</title> 5 G2 C) L& h3 j
<style type="text/css">
% R) W& i7 K$ F: V/ [; m<!-- 4 {+ t; A+ v8 r$ ]: l& r0 [
body {
  g; M4 G) A6 e6 a* s3 ifont-size: 12px;
! j, K8 s" c% y) htext-align: center; % E3 m" N" g  p
margin: 0px; ! c2 r/ N  J6 D0 P; i9 x
padding: 0px;
6 e' m+ F* C' Y% [9 y}
  @# b7 V7 {3 P) l% I# `' H6 b#pic{
" J' h. j. A6 [; T9 D9 P1 D  margin:0 auto; 6 ~: I6 [9 u% K( ?+ ~/ d
  width:800px;
, m6 E2 H$ m1 {# |$ [9 m  padding:0; # `% t, Y7 c; h& `
  border:1px solid #333;
- E5 [  N3 ~$ ~, b0 z. p1 \  } ( R1 G% Y9 o! [
#pic img{
6 V- Q  x9 U4 u2 P. a3 d# g    max-width:780px; ( s7 j3 u) a5 M& f6 V7 `9 d  |6 `
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 |! n2 L+ a0 n- ]7 f* Z
border:1px dashed #000;
/ \; Z* c% U; g# M} ! T9 S2 u! W# s& ^# P- t
--> - K( G5 [# X) \% B. \
</style>
1 A* q: i4 n& }% E- I  B</head>
$ M* {& k8 a+ o' z5 K% O6 A" z0 t2 V<body>
+ p* b( v& J4 h; C% J<div id="pic">
) o  E8 w. c8 K, @) w( l& C<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' q: E$ k$ ^, p9 h</div> / |* C: M8 v. L6 O3 _, x5 G
</body>
& }) w5 y$ Y5 s5 K! t6 f8 C9 y3 j( N2 p</html>




欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2