背景图片大小background-size中cover与contain区别

最新推荐文章于 2022-04-13 09:04:44 发布

ZJ_152261

最新推荐文章于 2022-04-13 09:04:44 发布

阅读量4.4k

点赞数

分类专栏： html 文章标签： css Html

本文链接：https://blog.csdn.net/ZJ_152261/article/details/80319480

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>测试用例</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="assets/css/common/common.css">
        <link rel="stylesheet" type="text/css" href="assets/css/demo.css">

        <style>

            /*背景图片contain和cover区别*/
           .img-container-one{
                width:400px;
                padding-top:400px;
                background:url("assets/images/flower.gif");
                background-size:contain;
                border:1px solid red;
            }
            /*背景图片大小设置为contain时为在显示适应该块大小的最大图片*/
            /*此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。*/

/*背景图片大小设置为contain时为在显示适应该块大小的最大图片*/ /*此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。*/ .img-container-two{ width:400px; padding-top:400px; background:url("assets/images/flower.gif"); background-size:cover; border:1px solid red; } /*背景图片大小设置为cover时为在显示覆盖该块大小的最小图片*/ /*网站：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/ </style> </head> <body> <div class="img-container-one"> </div> <div class="img-container-two"> </div> </body> <script src="assets/js/demo.js"></script></html>

ZJ_152261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景图片大小background-size中cover与contain区别

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;测试用例&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" type="text/css&q
复制链接

扫一扫