Görüntüleri yeniden boyutlandır, oranı koru, html?

Question

Arka plan resmini div'a sığacak şekilde yeniden boyutlandırmaya çalışıyorum. Sahip olduğum problem, resmin div'in boyuna sığmasını ve oranın korunmasını istiyorum. Örneğin, ekranın genişliğini (kaydırma çubuklarının görünmesini önlemek için) genişletmek istemediğim bir div'um var ve kullanmak istediğim resim 1024px X 400px boyutunda. Görüntünün yüksekliğini sığmaya çalışırsam, genişliği de sığacak şekilde zorlar ve oranı kaybeder. Görüntünün kısımlarının gösterilmemesi umurumda değil. Aslında, yapmak istediğim şey bu.
Hangi etiketleri kullanmalıyım? HTML5 veya CSS

Kullanım CSS background-size: cover; sadece yükseklik eşleştirmek istiyorsanız, <div> veya background-size: auto 100%; doldurmak ve umurumda değil

Answer 1

eğer taraflar gereğinden fazla veya akış altında:

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>

Ayrıca, görüntüyü kırpmak istediğinizde, merkezin her zaman sol üstte değil, her zaman odak olması için background-position: center; kullanın. Eğer oran eşiği biraz düşürebilir Eğer

Answer 2

, ayrıca kullanabilirsiniz:

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