Thay đổi kích thước Hình ảnh, giữ tỷ lệ, html?

Question

Tôi đang cố gắng thay đổi kích thước hình nền để vừa với div. Vấn đề tôi có là tôi muốn hình ảnh phù hợp với chiều cao của div và giữ tỷ lệ. Ví dụ, tôi có một div mà tôi không muốn nó phát triển hơn nữa chiều rộng của màn hình (để ngăn chặn các thanh cuộn xuất hiện) và hình ảnh mà tôi muốn sử dụng là 1024px X 400px. Nếu tôi cố gắng để phù hợp với chiều cao của hình ảnh, Nó sẽ buộc chiều rộng để phù hợp với cũng và nó sẽ mất tỷ lệ. Tôi không quan tâm nếu các phần của hình ảnh không được hiển thị. Trong thực tế, đó là những gì tôi muốn làm.
Tôi cần sử dụng thẻ nào? HTML5 hoặc CSS

Answer 1

Sử dụng CSS background-size: cover; để lấp đầy <div>, hoặc background-size: auto 100%; nếu bạn chỉ muốn để phù hợp với chiều cao và không quan tâm nếu hai bên quá mức hoặc dưới dòng chảy:

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>

Ngoài ra, hãy sử dụng background-position: center; nếu bạn muốn cắt hình ảnh sao cho trung tâm luôn là tiêu điểm thay vì ở trên cùng bên trái.

Answer 2

Nếu bạn có thể hạ ngưỡng tỷ lệ một chút, bạn cũng có thể sử dụng:

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