Nasıl Yapılır - En Boy Oranı
CSS ile bir öğenin en boy oranını nasıl koruyacağınızı öğrenin.
En Boy Oranı
Yeniden boyutlandırıldığında en boy oranını (4:3, 16:9, vb.) koruyan esnek öğeler oluşturun:
En boy oranı nedir?
Bir öğenin en boy oranı, genişliği ile yüksekliği arasındaki orantısal ilişkiyi tanımlar. İki yaygın video en boy oranı 4:3 (20. yüzyılın evrensel video formatı) ve 16:9'dur (HD televizyon ve Avrupa dijital televizyonu için evrensel ve YouTube videoları için varsayılan).
Nasıl Yapılır - Genişliğe Eşit Yükseklik
Adım 1) HTML'yi ekleyin:
<div> gibi bir kap öğesi kullanın ve içinde metin istiyorsanız bir alt öğe ekleyin:
Örnek
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Adım 2) CSS'yi ekleyin:
padding-top
DIV'nin en boy oranını korumak için bir yüzde değeri ekleyin . Aşağıdaki örnek, 1:1 en boy oranı oluşturacaktır (yükseklik ve genişlik her zaman eşittir):
Örnek 1:1 En Boy Oranı
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Diğer en boy oranları:
Örnek 16:9 En Boy Oranı
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Örnek 4:3 En Boy Oranı
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Örnek 3:2 En Boy Oranı
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Örnek 8:5 En Boy Oranı
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}