说说background-size:cover;与background-size:contain的区别

1.background-size:cover

官方background-size:cover;的解释是这个样子的，截图如下所示：

解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。

2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。

下面举一个栗子来说明这种情况：

首先原始的背景图片是这样的。

而设置background-size:cover之后（代码如下）

<!DOCTYPE html>
<html>
<head>
<style>
.allen
{
width:400px;
height:300px;
background:url(/i/bg_flower.gif);
background-size:100%;
background-repeat:no-repeat;
padding-top:80px;
border:1px solid red;
}
</style>
</head><body>
<p class="allen"></p></body>
</html>

效果图是这样的

可以看出按照图片的比例充满容器后，图片丢失了一些地方。

2.background-size:contain;

2.1 background-size:contain;在background-repeat:no-repeat;的情况下

直接看代码和效果图

代码只用修改一行即可（如下所示）

background-size:contain;

效果图如下所示：

2.2 background-size:contain;在background-repeat:repeat;的情况下

即代码如下所示：

background-repeat:repeat;
background-size:contain;

效果图如图所示：

小结：background-size:contain;必定会出现一张完整的图在容器中，可以分为两种情况考虑

（1）图片比例和容器比例相同：完整的充满整个容器；

（2）图片比例和容器比例不同：1）no-repeat; 出现留白

2）repeat; 平铺满整个容器，多余的部分裁剪掉即可

本博客由博主原创，如需转载需说明出处！谢谢支持！

说说background-size:cover;与background-size:contain的区别相关推荐

python size和count_python中size和count的区别
Python中count()方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置.count()方法语法: str.count(sub, start= 0,end=len(s ...
中性策略、回测结果对比、OK实盘报错“Close order size exceeds your available size”、OK开通新账户注意事项
1. 中性策略中解决utils下diff函数的调用问题:具体看factors各因子的import 2.回测simple_boll策略不同时期参数,想对不同时期的相同参数回报率进行计算,解决方案:1.先 ...
RuntimeError:Given input size:(256x1x1). Calculated output size: (256x0x0).Output size is too small
RuntimeError: Given input size: (256x1x1). Calculated output size: (256x0x0). Output size is too sma ...
记录解决RuntimeError: Sizes of tensors must match except in dimension 1. Expected size 27 but got size
问题描述在做目标检测服务过程中,将yolov7模型通过flask打包成预测服务API,此次训练的图像输入大小是1280,输入预测图片是如果图像大于1280则预测成功,小于1280则报RuntimeE ...
Sizes of tensors must match except in dimension 1. Expected size 24 but got size 25 for tensor numbe
在做图像分割的时候遇到了错误,错误如下: File "D:/segmentation/Pytorch-UNet-master/train.py", line 193, in < ...
RuntimeError: Given input size: (256x4x4). Calculated output size: (256x0x0). Output size is too sma
最近在跑一个联邦学习项目,用到的数据集是cifa-10,跑代码时出现以下报错: RuntimeError: Given input size: (256x4x4). Calculated output ...
android layout background,Android LinearLayout Gradient Background
问题 I am having trouble applying a gradient background to a LinearLayout. This should be relatively s ...
Python 路径问题：cv2.error: OpenCV(4.1.0)...size.width＞0 size.height＞0 in function ‘cv::imshow‘. 解决方法
cv2.error: OpenCV(4.1.0) C:\projects\opencv-python\opencv\modules\highgui\src\wi ndow.cpp:352: error ...
Sizes of tensors must match except in dimension 1. Expected size 44 but got size 45 for tensor numbe
项目场景: 跑U-net网络的时候,有一步是torch.cat()操作,出现下面是代码 class UNet(nn.Module):def __init__(self, in_channels, o ...
html body background,HTML body标签 background 属性
HTML 标签 background 属性定义和用法 HTML5 已不再支持 background 属性.请使用 CSS 替代. background 属性规定规定文档的背景图像. 浏览器支持所有 ...