返回列表 发帖

在DIV下图片自适应的解决方法

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
9 i5 e: U8 f0 {' @/ Z8 O关键在于:max-width:780px;以及下面那行。9 z! w8 Y% z7 \! l6 p
固定像素适应:6 _; H$ b* v( _: Z

% G) X1 G+ V  h$ 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>  以下是引用片段:
4 B' z; Q( e5 F' h<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> / [% ]9 L) p$ W& v: n9 w* F
<html xmlns="http://www.w3.org/1999/xhtml";>
: W2 m+ D- w# e: g- c$ Y. Q+ n<head> 0 ^( d6 \/ h+ r$ }3 r4 Q
<meta http-equiv="Content-Type" c /> " s2 p/ E! ~) G/ B
<title>css2.0 VS ie</title> 1 i3 O' q! @) M8 {! F+ N' S
<style type="text/css">
% g. j! ~9 D! @$ J<!--
4 d' x5 v) I8 E$ d) g% x( vbody {
/ s& u0 j6 L  \- O0 ffont-size: 12px;
: ?4 {; v! f' a. |8 Utext-align: center;
) l: E$ ?$ u% h& p- ~8 f& n) cmargin: 0px;
& Y" `. I" O( e1 d2 ^, lpadding: 0px; 7 [. S- H6 N' t4 Y% `
}
; N+ |( |2 D) x* e- @#pic{ 1 i* w! P( L8 m! t! @
  margin:0 auto;
, e. Q1 ~# Z0 B, S; q- I2 C8 Q  width:800px; - m+ @9 {/ Y' P. k3 z
  padding:0; ; ]6 n; h5 Q9 A/ W
  border:1px solid #333; 8 ]6 I" A+ [* a
  }
' d# b, {+ {, P! r/ Q3 O, O$ o#pic img{
+ j* g- s2 o& `4 x* d    max-width:780px; " N; e+ m' W: ^0 F# K5 j
width:expression(document.body.clientWidth > 780? "780px": "auto" );
& w3 L+ Y8 _3 ?$ Fborder:1px dashed #000; . E1 m% }$ X2 z5 k. z
}
% \; Z- a# Z: t4 P* A, b-->
- c" ?( U& u, _# U( k  \</style> ; x5 R+ y. L2 q/ k4 R- _- Q& a
</head> / o) w  i( p$ x  I$ a
<body> 9 {9 [) w/ N. g( K# _7 N
<div id="pic"> ( K. C  u; n) E. j" D/ ^! E/ _6 e
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
8 g# `6 v  x8 x/ J; h  ~</div> 6 T5 I0 j" g1 {) P
</body>
! P5 j  k' _; V# o1 k</html> 2 _1 {7 J  {# ^" E5 l

+ c" G" B2 P  V! O' g百分比适应:2 s, g" ]8 M3 K. r# {: w
以下是引用片段:4 V& b- g% U! x' |! N2 P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>   p% w, D8 S# Q# |! E
<html xmlns="http://www.w3.org/1999/xhtml";> 1 e4 Q+ H" u. i) [
<head>
2 s' L  f  y- h<meta http-equiv="Content-Type" c />
2 T" u1 _2 M, C! i<title>css2.0 VS ie</title>
/ {+ s; Y4 ?) m' }  f  Y<style type="text/css">
/ a3 r" k8 {6 G1 a7 i<!-- % }4 A; \' l: }7 E- r3 F
body {
" J' r* b8 Y* e6 X# w1 Pfont-size: 12px;
" u& w3 y9 D' t1 b" Y$ S9 jtext-align: center;
( ~7 S- W/ [6 b* nmargin: 0px;   Y. t. p# {2 Z  H! V
padding: 0px;
! g4 b1 {/ I: k5 Q2 c# ?* O}
1 X# k) _# N" h+ x% X2 ^7 S#pic{ ! n; I. e1 M% B) b
  margin:0 auto;
5 H3 b- j; Z4 E  width:800px;
7 P3 R/ z% K6 l4 _  padding:0;
# O' l( M3 }, S) I  border:1px solid #333;
1 [0 t( M- z! ~  K" H9 r  } : e% f, x% m! }  ]' q8 X) v
#pic img{
* {1 }9 A0 j" F    max-width:780px; : e' F3 A3 V+ H3 j7 m# x+ P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
' _) V. p& A9 W9 ^; |border:1px dashed #000;
9 r! ^3 l( c7 u2 y}
$ W2 p! W' X6 |# \7 q) a-->
( r3 ]" ^. A* N</style> 3 }# `% m- n4 }/ X: G  R
</head>
' r' [1 Y: p1 L( Q4 R; f<body>
) C* `) d' w. ^3 w; m# x8 F, w" y4 h<div id="pic">
$ R+ D5 s; _: o, W$ w! h6 a<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> , x$ B4 T7 f3 r
</div>
' A+ d* z" U) m$ w7 R4 H5 T9 z</body>
0 q% x$ I% ^2 I  F' T</html>

返回列表
【捌玖网络】已经运行: