Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。2 ?! h# [( A% j0 \
关键在于:max-width:780px;以及下面那行。1 s8 h/ L8 s9 c* l9 H) h6 o$ b1 k# F
固定像素适应:  g7 O2 X3 V, A  s& R$ f. M

, O4 {3 t! d1 x8 d2 sdotted; 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>  以下是引用片段:$ ~; M; A" {; E: I0 d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& V8 r4 |4 }1 ~, j9 F; |% W- H% P<html xmlns="http://www.w3.org/1999/xhtml";>
5 }' v! J* {3 t: A, p0 u<head>
" b6 g- Y" l1 [0 @0 m' c5 H<meta http-equiv="Content-Type" c />
! S- C) g! [3 l( c$ _% m<title>css2.0 VS ie</title>   @; ^$ O* x6 O, X& @- [, n
<style type="text/css"> 4 f9 B0 Y3 f- m2 A1 A2 A+ N
<!--
$ s) g* k( @* f3 P9 r* Sbody { + M, `4 W* X' D$ m- U8 u
font-size: 12px;
& F" ^8 u' \; X# `* Ttext-align: center; , A4 G& T* Z1 N
margin: 0px; ' B- P3 t# Y/ i8 A. N! S. Y: u
padding: 0px;
% [3 v9 d& a- F# v/ @1 n}
% I8 [; u9 }  I9 `6 u) N#pic{ ) H/ @4 n7 X6 l+ J- Z8 ?
  margin:0 auto; 5 E# }5 l' R6 P% X" z& c
  width:800px; : R8 h' l# w; y- V0 p7 p; q/ w6 K6 F
  padding:0;
# Z8 n. a" h% ]$ Z  k4 z' }. o  border:1px solid #333;
; q8 r0 Q" N5 `2 \( l7 Y: A  }
; }0 g9 n7 e, \. I( [6 d* l#pic img{
3 M. H6 {  K# G, G+ X# [& J    max-width:780px;
% X8 Q5 f8 q; Q0 F% ], F: Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); : R# ]) J; |! J9 k+ ]; L1 d7 m8 B
border:1px dashed #000;   ]# n; Q3 w! k
}
' n5 k& D2 W) I- Q-->
. {5 a7 S$ {. M" T) T! R8 o</style>
6 H" l% w( ?  Z, U& g</head> , _4 M8 z/ w& u: @' h
<body> 2 t/ B  W% ~7 K0 }* E" K  _# G5 q7 H
<div id="pic"> , X) p! {$ D6 R
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 e! f% V5 R7 m8 \5 e1 g, F9 a( X
</div> & s( e6 \' p, `
</body>
. s' z6 t0 E8 L7 }, _</html>
% T7 a+ d& A8 Y  ~- g1 I9 w% [- t$ P; |
百分比适应:
0 E' H# ?+ Z  ~+ N2 X, \* M以下是引用片段:% h% M- f9 c6 Z, T  S$ m
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
( H- y) j+ B4 l# j/ e7 J<html xmlns="http://www.w3.org/1999/xhtml";> 9 L4 c* w; e  Z: \) i
<head>
6 `* M, N) u; D7 z5 h<meta http-equiv="Content-Type" c />
; v* m' I" O' x* ^8 o<title>css2.0 VS ie</title>
1 a, |( o  W* L7 U! S4 w( t<style type="text/css">   N# i2 P" ]/ C/ B
<!--
# z9 B$ |! v' `6 [body {
' t, Q& \! F+ W- F5 Q5 Ffont-size: 12px;
/ {8 ?+ W' u* z: A7 p% Jtext-align: center;
! p5 q& V, e, _margin: 0px;
( H' v1 q* i; Rpadding: 0px;
* I8 J: g) e* L$ L3 J}
' K# }. T# H: R#pic{
( C0 e# ]/ n, ]  margin:0 auto; # r. Q$ A" q" x( N5 D
  width:800px;
9 {# ^1 X+ ~! o% o3 k) W  padding:0;
4 O& S; b6 ]; A. R  border:1px solid #333;
8 r6 z& |3 U  F* X! y8 z  } 0 t' ~% o9 X, r+ s; d, O
#pic img{
: E( ]4 p* ?/ r+ e9 I3 z& R( ~( k    max-width:780px;
4 I4 H8 l- h* L) y( ?width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 4 x# w) ]8 ?/ h( D
border:1px dashed #000;
7 o; Q0 m1 j: O. A% P} 0 t8 f2 K, j  q' _
-->
- a1 o4 A$ n) M9 t</style>
' h. P7 P6 w# D$ F/ d5 e; q</head>
1 B' |" R+ U+ r$ x3 c7 x, `<body> + J2 l2 F, l) `* E* p4 {
<div id="pic"> . n7 ~2 z- q( d5 o6 n
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 9 {  c2 H, j' ?# N
</div>
6 j- `/ {1 Y. s; T4 G</body>
4 z! B( v$ D3 [% k7 D</html>




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