Question

在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>

图像是这样的：

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

Answer 1

对于前三个属性：

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

这将是重新创建您使用三种背景尺寸属性显示的福特图像的代码。

＆＃13;

#img1,#img2,#img3{
  background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Ford_Motor_Company_Logo.svg/2000px-Ford_Motor_Company_Logo.svg.png);
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#f00;
  width:20vw;
  height:20vw;
  display:inline-block;
}
#img1{background-size:100% 100%}
#img2{background-size:contain}
#img3{background-size:cover}

＆＃13;

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>

＆＃13;

同样在JSFiddle。

对于你的第二个问题，最好的解决方案是使用background-size：cover;像这样：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width:300px;
            height:200px;
            background-image:url(https://i.stack.imgur.com/dOnF7.png);
            background-size:cover;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

＆＃13;

如果您还有其他问题，请随时提问！

Answer 2

对于背景图片，您的＆＃34; Aspect Fit＆＃34;等于background-size: contain;，Aspect Fill将为cover

我可以将背景图像设置为属性（Scale to Fill，Aspect Fit，Aspect Fill）？

2 个答案: