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

<!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>
阅读更多
文章标签: css Html
个人分类: html
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭