简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
CSS3中background-size的问题
PHP中文网
PHP中文网 2017-04-17 11:28:15
0
2
512

cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

这里面说的最大大小和最小大小该怎么理解呢？为什么我觉得它们好像没有区别啊？

PHP中文网
PHP中文网

认证高级PHP讲师

全員に返信(2)
伊谢尔伦
伊谢尔伦2017-04-17 11:30:15 2棟

写一段代码自己验证一下啊：

<!DOCTYPE html>
<html>
<head>
<style> 

p {
width: 200px;
height: 200px;
}
.contain{
border: black 1px solid;
background:url(/i/bg_flower.gif);
background-size:contain;
background-repeat:no-repeat;
padding:10px;
}

.cover{
border: red 1px solid;
background:url(/i/bg_flower.gif);
background-size:cover;
background-repeat:no-repeat;
padding:10px;
}

</style>
</head>

<body>
<p>contain</p>
<p class="contain">

</p>

<p>cover</p>

<p class="cover">
</p>

<p>原始图片
<img src="/i/bg_flower.gif"/></p>

</body>
</html>

可以看出，尽管cover和contain都保持了纵横比，但是contain会把图片完全包含进box，box内部有些部分没有图片：

而cover则是图片会完全覆盖box，而图片的有些部分则会不显示：

いいねを押す +0
返信を追加
刘奇
刘奇2017-04-17 11:30:15 1棟

http://segmentfault.com/a/1190000002481921#articleHeader8

据说这里有答案……

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！