Html 我可以将背景图像设置为属性（比例填充、纵横比匹配、纵横比填充）吗_Html_Css_Image

Html 我可以将背景图像设置为属性（比例填充、纵横比匹配、纵横比填充）吗

html css image

Html 我可以将背景图像设置为属性（比例填充、纵横比匹配、纵横比填充）吗,html,css,image,Html,Css,Image,在html中，我可以设置背景图像的以下属性吗？图像在iOS中，我可以设置图像的填充属性，如下所示，但我不知道html中是否有类似的属性： Scale to Fill, Aspect Fit, Aspect Fill 在我的代码中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &

在html中，我可以设置背景图像的以下属性吗？图像在iOS中，我可以设置图像的填充属性，如下所示，但我不知道html中是否有类似的属性：

Scale to Fill,
Aspect Fit,
Aspect Fill

在我的代码中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #div1 {
            width:300px;
            height:200px;
            background: gray url(img/1.png);

        }
    </style>
</head>
<body>

<div id="div1">

</div>

</body>
</html>

图像如下：

但结果如下所示，图像是修剪的：

对于前三个属性：

background-size: 100% 100%;
background-size: contain;
background-size: cover;

这将是重新创建福特形象的代码，你正在显示的三个背景尺寸属性

img1、img2、img3{ 背景图像：urlhttps://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Ford_Motor_Company_Logo.svg/2000px-Ford_Motor_Company_Logo.svg.png; 背景位置：中心；背景重复：无重复；背景色：f00；宽度：20vw；高度：20vw；显示：内联块； } img1{背景大小：100%100%} img2{背景大小：包含} img3{背景尺寸：封面}

对于背景图像，纵横比匹配等于背景大小：contain；，方面填充将被覆盖