调整图像大小，保持比例，html？

Question

我正在尝试调整背景图片以适合div。我遇到的问题是我希望图像适合div的高度并保持比例。例如，我有一个div，我不希望它进一步增加屏幕的宽度（以防止出现滚动条），而我想要使用的图像是1024px X 400px。如果我尝试适合图像的高度，它会迫使宽度也适合，它会失去比例。我不在乎图像的部分是否未显示。事实上，那正是我想要做的。
我需要使用哪些标签？ HTML5和CSS

Answer 1

使用CSS background-size: cover;填补<div>，或background-size: auto 100%;如果你只是想企及的高度，并不在乎，如果双方过度或不足流量：

html, 
 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div { 
 
    background-image: url(https://placebear.com/1024/400.jpg); 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid black; 
 
} 
 

 
.cover { 
 
    background-size: cover; 
 
} 
 

 
.center { 
 
    background-position: center; 
 
} 
 

 
.height { 
 
    background-size: auto 100%; 
 
}

<h1>Unstyled</h1> 
 
<div style="width: 50px; height: 200px"></div> 
 
<div style="width: 200px; height: 50px"></div> 
 
<div style="width: 125px; height: 125px"></div> 
 

 
<h1>Un-centered</h1> 
 
<h2>Cover</h2> 
 
<div class="cover" style="width: 50px; height: 200px"></div> 
 
<div class="cover" style="width: 200px; height: 50px"></div> 
 
<div class="cover" style="width: 125px; height: 125px"></div> 
 

 
<h2>100% Height</h2> 
 
<div class="height" style="width: 50px; height: 200px"></div> 
 
<div class="height" style="width: 200px; height: 50px"></div> 
 
<div class="height" style="width: 125px; height: 125px"></div> 
 

 
<h1>Centered</h1> 
 
<h2>Cover</h2> 
 
<div class="cover center" style="width: 50px; height: 200px"></div> 
 
<div class="cover center" style="width: 200px; height: 50px"></div> 
 
<div class="cover center" style="width: 125px; height: 125px"></div> 
 

 
<h2>100% Height</h2> 
 
<div class="height center" style="width: 50px; height: 200px"></div> 
 
<div class="height center" style="width: 200px; height: 50px"></div> 
 
<div class="height center" style="width: 125px; height: 125px"></div>

另外，如果您想剪裁图像以便中心始终是焦点而不是左上角，请使用background-position: center;。

Answer 2

如果你可以降低你的比门槛一点，你也可以使用：

img { 
    width: 100vw; 
    height: 100vh; 
    max-width: 100%; 
    max-height: 100%; 
}