|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14371
- 金币
- 2471
- 威望
- 1647
- 贡献
- 1419
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 F$ |5 l- O" d+ b2 O( F4 q关键在于：max-width:780px;以及下面那行。
3 Y0 |& Q# i( m% ~6 F3 W- u固定像素适应:
* z; }# Y. |) d- Q- c6 {4 R8 E; N$ |' q: Q& v* F
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> 以下是引用片段：
( p. ?1 `- E2 t/ S* F# g0 i) q<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> * g9 f% t1 d! G7 I
<html xmlns="http://www.w3.org/1999/xhtml";> 1 }9 q l; g1 \) Y
<head> + j* }4 n* @5 w. r9 M+ s! {
<meta http-equiv="Content-Type" c /> ! ?- X" P# w2 i: u, I
<title>css2.0 VS ie</title>
, x5 z, J7 g1 v+ ?0 r8 Z<style type="text/css"> , Z6 g3 {1 N' |
<!-- 5 m; S% |) N- g6 }
body {
& X# B1 l& x7 t" Mfont-size: 12px; # Y$ G) G4 x# f H! k
text-align: center;
1 R+ |+ z" F* R& t9 D# @margin: 0px;
8 G8 V) R; Q1 b2 upadding: 0px;
6 t0 K4 C& u8 t" ]/ J} / b( }7 y2 y$ m/ W' R k4 a
#pic{
/ V+ k I) b4 G margin:0 auto; " G3 |7 [5 `$ z$ s) G9 y
width:800px;
0 D$ [3 }8 s3 \( C padding:0;
' k7 x8 }: H/ A' L* J- j9 p border:1px solid #333; # c! E6 |& n+ D& f! d) q
}
i h# H4 U) c( u' l- B#pic img{ ) p) ]9 a( l4 ?" R6 z9 n- K
max-width:780px;
2 X0 B! G) l) r7 g$ Gwidth:expression(document.body.clientWidth > 780? "780px": "auto" );
3 ~! ]4 x" D3 \5 f' |5 g( _, Qborder:1px dashed #000; 6 W4 \" H* Q6 T# K- T8 A9 e* X
} # y# n2 f$ O P2 f
--> 6 g2 U" o1 p# t5 M: y; L7 `
</style> ; U& V$ z" f0 ^! N8 |" C- ]& B
</head>
( |/ w0 J) V9 m6 O! k6 _+ q<body>
p+ t2 ]4 I F# ?/ M6 A8 @<div id="pic">
6 u% H* v$ @8 v& ^+ F<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
' z5 }5 j9 N8 P$ e: r' ~' K3 U9 h6 R</div> 2 F4 U9 E0 D5 s5 p3 A, M- D; S
</body>
' p- n% c$ Q4 {9 A</html>
! w) ?) w: |0 s0 M
* p1 d0 v; M6 Y/ u+ d百分比适应:
" @2 Y3 z) U# `1 {" x以下是引用片段：
+ \7 { V: O7 @' _1 Z( ~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 Z5 ~7 J1 D9 k, I8 H/ N9 `
<html xmlns="http://www.w3.org/1999/xhtml";>
4 N% u- E0 V, _' {* T+ i<head> ) R2 m- m+ b2 d# ?* o( ]: B+ L
<meta http-equiv="Content-Type" c />
" R/ f& }) u6 y# ~" H<title>css2.0 VS ie</title> 5 k* y, T4 J: M' X; S: l" _
<style type="text/css"> / C5 M' l; C( a$ t5 K) d
<!-- , S4 k- ^0 Y: g. \
body {
8 R6 C' k! N$ M# j8 R# xfont-size: 12px; + C: \8 B% U! r9 a. F9 I
text-align: center;
, n5 ~4 c! u( I' smargin: 0px; # `% d! T' V2 W$ R
padding: 0px;
# t% s5 U$ Z) N, Z}
. S3 I' Q2 n _! I. P#pic{ ( A/ p3 G( o5 C9 B9 _8 q2 S
margin:0 auto;
7 |: z8 G J2 Y6 ^ width:800px;
# z5 L, }9 X% k( m( L0 @& U% m padding:0;
. {0 T* h) s! {7 b) @ border:1px solid #333;
9 g M; Q# ?$ I/ z7 I } * ]: x X% n* s( I# t( p# P) k
#pic img{
* v0 q2 B: }" e, n max-width:780px; * H: t3 S7 ]. q1 a& s8 V! U
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); : V2 @( \% d4 b \. P6 A" r
border:1px dashed #000; 4 e& [% B8 q6 Z- @* Q$ P/ B' H
}
* f6 m) z1 ^& `$ D* q$ m-->
- q- n: W4 [/ t1 U5 H" [" w</style> # ]5 z- {: W5 S
</head>
; i" s7 ? w2 B7 Q' f4 E<body>
h$ u3 O# [5 h$ U7 I8 R<div id="pic"> " @# W. B5 C6 x; o; P; z7 b4 y+ T
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
|& A2 k5 ~$ ~' s* l</div> ; H4 h1 ]; c: b2 K* b/ M
</body> + L9 N# v) `/ _' ^: ] ^
</html> |
|
发表于 2007-12-8 14:55
| 