Cover和contain属性

最新推荐文章于 2024-07-19 09:46:37 发布
最新推荐文章于 2024-07-19 09:46:37 发布
阅读量561 收藏 2
点赞数 9
分类专栏： css 文章标签： 前端 javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59076775/article/details/136276956
版权

一.背景的盒子

代码：

  <body>
    <div class="box"></div>

    <style>
      .box {
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        background: url(./20191017095131790.png) no-repeat;
      }
    </style>
  </body>

盒子的宽度和高度是500px

二.图片的大小

424X269

三.显示的效果

四.cover的效果

五.cation的效果

六.总结

1.cover沾满了这个盒子,图片显示的不完整。

2.cation 以图片的长边进行拉伸,在案例中也就是424这条边,进行拉伸,宽度也是，使图片完整显示,可能会有多余的留白。

3.区别:cover占满了整个盒子 图片显示可能不完整 ,cation图片显示的完整，可能会有多余的部分。

如何使用CSS设置网页中的图片属性？
a451319296的博客
05-12 1966
本文将帮助读者通过学习CSS掌握如何让网页中的图片变得更加美丽。首先，我们会介绍一些常用的CSS样式，例如border-radius、box-shadow和outline等。这些样式可以让图片具有圆角、阴影和边框等效果，从而提升图片的美观度。其次，我们还会介绍如何使用CSS调整图片的尺寸、透明度和位置等属性，让图片更好地融入到网页中。最后，我们会分享一些实用的CSS技巧，例如如何为鼠标悬停在图片上时添加特效、如何创建响应式图片等。通过本文的学习，读者可以轻松地打造出漂亮的网页图片效果。
CSS background-size ：contain与cover区别
ee22ee的博客
01-30 1553
css background-size设置contain与cover区别
css中contain和cover的区别（转载）
m0_65247031的博客
01-30 1367
css中contain和cover的区别（转载）
CSS中object-fit: cover；
最新发布
HWL5679的博客
07-19 688
当你使用这个值时，元素的内容（比如一张图片）会被缩放以完全覆盖元素的整个内容框（即元素指定的宽高区域），同时保持其宽高比。
CSS background-size contain 与cover的区别
Maggie的博客
03-17 9475
最近在重温CSS，发现好多东西都忘了，比如background－size属性中，contain与cover的区别。菜鸟教程上是这么说的： 有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适合背景容器的大小。那么两者的区别呢？这就要根据图像是否重复来分别讨论了。在no-repeat情况下，如果容器宽高比与图片宽高比不同，　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分...
css background-size属性cover和contain的区别
qq_59281339的博客
08-26 567
也就是容器高度超过图片原有比例，图片的宽会缺失，通俗点讲，就是图片右边会少一部分；反之，容器高度小于图片原有比例，图片下面会有一部分看不见。容器宽度超过图片原有比例，图片下面会有一部分看不见；反之，容器宽度小于图片原有比例，图片右边会少一部分。cover不会留白，如果容器宽高小于图片的宽高，会把多余的部分截掉。contain属性,容器宽大于图片宽，那么图片的右边会留白。总结了一下这两个属性的区别，简单来说就是。如果容器高大于图片高，那么图片下面会留白。在no-repeat的情况下。...
CSS3 background-size 属性值：cover
weixin_34405354的博客
04-05 536
当设置值为cover，可以呈现出图片铺满浏览器内容的视觉效果 实例 规定背景图像的尺寸： div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } 定义和用法 background-size 属性规定背景图像的尺寸。...
border-image-width 两个属性值 cover 与 contain 的区别
tanqin的博客
06-20 865
contain 与 cover 的区别两者的相同点两者的不同点图片尺寸对比图covercontain 两者的相同点 contain 与 cover 都是保持图像原宽高比例进行缩。 两者的不同点 图片尺寸对比图 cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。 contain 缩放背景图片以完全装入背景区，可能背景区部分空白。 ...
【前端知识之CSS】CSS图片背景的知识
weixin_44337386的博客
06-18 1016
本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS图片背景的知识。
IE8兼容性和判断IE浏览器版本
02-23
再次，IE8不支持css3的background-size的cover和contain属性，解决办法是使用“background-size polyfill”库来兼容，在所有用到这两个“background-size”属性值的地方，加一行“-ms-behavior”属性。 此外，IE8不...
踩坑(css3+h5)_background-size属性
qq_43260366的博客
02-08 1509
图片并不能撑开盒子，要想显示背景图片，需要图片设置宽高或有足够的内容撑开盒子的前提下。[1] 当元素没有设置background-size属性，或是设置background-size:auto auto时，会按照图片默认的宽高进行展示图片宽高 大于 元素宽高 -> 超出元素宽高的图片会被截断(不显示)图片宽高 小于等于 元素宽高 -> 正常展示(展示位置以及是否平铺需要看background-position以及background-repeat)
CSS3 Backgrounds属性相关介绍
12-11
- `background-size`：允许设定背景图片的大小，可以是绝对值（像素、百分比等）或`cover`（使背景图片完全覆盖元素，保持宽高比例）或`contain`（保持图片宽高比例，尽可能大但不溢出元素）。 这些新特性的引入极...
CSS中background-size的cover属性
冷江
05-21 4772
元素设置background图片的时候，如果需要将图片拉伸到和元素一样大，设置 background-size:cover 就可以了
css background-size：contain与cover的区别
qq_52928592的博客
01-30 301
记录：当背景图片与盒子大小不符不能完全显示时怎么办
css中background-size属性cover、contain、100%的含义案例详解
wangyining070205的博客
02-14 7655
昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。 看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。 一、背景区域和背景图像宽高比例相等 在div中，设置其背景图像，如果
背景图片大小（background-size）cover、100%和contain的区别
weixin_46544600的博客
12-28 3153
三者都是来定义背景图显示尺寸大小的，三者之间的区别： cover：是按照等比缩放铺满整个区域。优点：图片不会变形。 缺点：如果显示如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。 100%：长宽100%显示，可能会拉升图片导致图片变形。 contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边 ...
【前端CSS基础之常见属性】
qq_57681480的博客
10-31 309
前端三件套扫盲学习
html的cover属性,html – 有一个等价于background-size：cover和包含图像元素？
weixin_39965881的博客
06-05 1386
解决方案#1 – 新的object-fit property(No IE support yet)只是设置对象适合：盖;在img。body {margin: 0;}img {display: block;width: 100vw;height: 100vh;object-fit: cover;} 你可以阅读更多关于这个新的属性在这个webplatform article。从上面的文章 – 关于’...
background-size： contain 与cover的区别，以及ie78的兼容写法
weixin_30699463的博客
02-22 193
一：background-size： contain 与cover的区别： 作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以...
css中background 中 cover4
08-23
在CSS中，background属性用于设置元素的背景。而background-size属性则用于指定背景图片的尺寸。 关于你提到的cover属性值，它可以用来让背景图片铺满整个背景区域，但是可能会导致图片被裁剪。具体来说，如果背景区域的宽高比例和背景图片的宽高比例不一致，那么背景图片可能会被拉伸或压缩以适应背景区域。但是，无论如何都会保持背景图片完全覆盖背景区域，即使只是部分图片被显示出来。 另外，你还提到了contain属性值。这个属性值会保持背景图片的宽高比例，使得整个图片都能显示在背景区域内，但是可能会留有空白区域。 综上所述，cover属性值会让背景图片铺满整个背景区域，但可能会导致图片被裁剪，而contain属性值则会保持图片的完整性，但可能会留有空白区域。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [css中background-size属性cover、contain、100%的含义案例详解](https://blog.csdn.net/wangyining070205/article/details/113805931)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [CSS之Background-size:cover](https://blog.csdn.net/KK_2018/article/details/103388247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值