Board logo

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

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

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 l: g. u* \+ _+ N6 ?关键在于:max-width:780px;以及下面那行。
, s6 ]7 @' M( Z' E固定像素适应:) p' F& d; r+ D% J$ D

4 j' j1 p1 o0 p) E+ D  Zdotted; 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 z7 o, Q. V! E0 R
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
" ]8 N0 p: h3 R9 N* F<html xmlns="http://www.w3.org/1999/xhtml";> 5 [- {9 y, U8 \/ H8 T
<head>
$ j( l( y0 v$ N<meta http-equiv="Content-Type" c /> # a8 ~+ ~% w' ~8 P9 ?3 }2 d2 {
<title>css2.0 VS ie</title>
" f) o$ ^+ m9 B- _( d<style type="text/css"> 4 p) [9 t. {% ]* g5 S; \
<!-- 4 I: H3 u9 b: m8 K( v  m
body {
& v. ~' }4 a2 hfont-size: 12px;
5 N$ v2 ?  x: o  a6 |text-align: center;
9 e) P+ T& B. K$ vmargin: 0px; + \% e5 d+ E7 o9 s+ L
padding: 0px; ) Y8 V) H8 S  `- W8 N. F
}
' F3 D2 e9 q0 c; H5 g#pic{ . ?$ D& }, t/ p4 g$ E. A; P. s
  margin:0 auto;
; x: c5 Z1 W& j0 L  width:800px; 2 M- ?. l9 @  X7 `$ i4 f2 O4 n( R
  padding:0;
7 Q/ w$ r. J! J+ y. y8 c8 V  border:1px solid #333;   y) ~/ |9 z+ Y/ {# O( \
  } 5 G  ^3 N9 n3 i5 p7 k5 n" m
#pic img{ % _6 Q2 `' R1 g9 T. g
    max-width:780px; 7 m4 ^' F  @. a% f9 u
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 3 O. Z  A  ?! V! o" {( `, @
border:1px dashed #000;
  y, @9 i( G0 h0 K8 l# D}
4 O, m; @* M& K--> 2 q! D  E/ E  H1 V- z* |6 j4 [; c
</style> 6 Y$ m3 r$ Q/ p4 n
</head> ( K6 O6 s. y  c6 ^: W
<body>
; H" ^& W* \+ X* H( j<div id="pic">
0 s* S: p' {: v9 i9 m<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> # ^0 w6 S* t  i# T& d$ j: s
</div> + |# g5 J/ c& V, e9 y# A/ S( ~
</body>
0 ]& O4 W1 {: n7 x& @' e9 s6 n</html> * k# K# e2 p' \

$ J( w' V5 o/ ]- U  G4 R: e百分比适应:" {2 a; y3 j2 H) P0 z
以下是引用片段:7 b4 a" h  Q  N# F8 ~+ w  d# }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> - o* k4 `' j+ p& r: A
<html xmlns="http://www.w3.org/1999/xhtml";> ; p  \# @9 t" S
<head>
1 F7 l0 x8 f4 t' p# L! ^* r<meta http-equiv="Content-Type" c /> / _, ~' B6 Y$ i
<title>css2.0 VS ie</title>
! K' G0 j) |! A<style type="text/css">
2 Y; e' Y/ q1 u, y" c( P2 N<!--
" J  [/ J. ]% b! S+ w% j+ j" Ibody { . j$ k- E1 i3 m+ T0 O3 c
font-size: 12px;
- d6 V" d9 W8 Y: ~+ \4 I# Ctext-align: center; * z  d, y& k; D
margin: 0px;
6 p* g0 \, F) t7 ]' W- ]padding: 0px; " R, q1 w8 Q) O$ u
}
% r$ W3 o" [; X4 X  D3 G9 M; k' d#pic{
8 x9 x" G6 h8 q  margin:0 auto; 6 ^& W6 D6 Q* D; i
  width:800px;
  n4 {: c6 b  Y+ A' `5 k  padding:0;
" s5 T; M7 b& q  border:1px solid #333;
+ J5 h1 q( C* F  } 2 o7 ?) m9 G* D4 I- A
#pic img{
0 ]9 S  ]' O3 w1 {# S; l# {    max-width:780px;
: _: ]" I6 v0 wwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , q6 `" c9 }! t: [: q
border:1px dashed #000;
. p' O8 i# @5 m1 R} , o% {- \' A; X8 `, n9 u
-->
# y" z9 [- P) @6 I9 M4 s4 O9 k</style>
+ t9 _- b& A! v  I8 ?</head> - Y! m' }1 X" n* {' b/ E
<body>
1 |9 z; |; Y/ Y4 Z0 ~<div id="pic"> ( n" O0 C) k" x& g  A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , @; e" |$ m# C; n* m8 [3 i
</div>
  U$ W! Z/ k" ^4 {0 p( E$ i) @* z$ w</body> 7 E1 K1 H, z6 r
</html>




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