Can I set the background image the property(Scale to Fill, Aspect Fit, Aspect Fill)？

css, html, image

Solution

For the first three properties that would be:

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

And this would be the code to recreate the Ford image you're showing with the three background size properties.

#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}

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

Also on JSFiddle.

For your second question the best solution would be to use background-size:cover; like so:

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

If you have additional questions, feel free to ask!

Problem

In html can I set the background image the below property？(the image is in iOS I can set the image's fill property like below, but I don't know if there is the similar property in html): ``` Scale to Fill, Aspect Fit, Aspect Fill ``` In my code: ``` <!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> ``` The image is like this: But the result is like below, the image is trim:

Original source