height degerini width degerine esitleme

ferid244 640 gün önce

283 defa görüntülendi

merhaba width degerini 33% yapiyorum yani ekrani 3 esit hisseye boluyorum icine yuvarlak div yerlestiriyorum simdi height degerini ekran asagiya dogru uzadigi icin % olarak veremiyorum px olarak veriyorum bu da farkli cep telefonu boyutlarinda ekranin genisliyi deyisdiyi icin yuvarlakda bozulmalar oluyor genislik azaldikca yuvarlak ellips formasina donusuyor bunun karsisini nasil ala bilirim height degerini css te width degerine nasil esitleye bilirim yani width ne kadar pixel olsa otomatik height degeri de width e gore deyissin ve anki kadar pixel olsun

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

ebykdrms

640 gün önce

.item {
    width: 33%;
    aspect-ratio: 1
}

#012354

f4kor4ll

640 gün önce

Merhaba, bunun için padding-bottom kullanabilirsiniz. Yuvarlak div’iniz için border-radius özelliğini kullanarak yuvarlak oluşturabilirsiniz. Ardından padding-bottom özelliğine yüzde olarak bir değer atayabilirsiniz. Bu değer, div’inizin genişliğinin yüzdesi olarak ayarlanabilir. Bu sayede, genişlik küçüldükçe dikey yükseklik de orantılı olarak küçülecektir.
Örneğin, aşağıdaki CSS kodu ile 4:3 oranında bir yuvarlak div oluşturabilirsiniz:

div {
  width: 33%;
  border-radius: 50%;
  padding-bottom: 75%; /* 4:3 oranı için */
}

Bu şekilde, yuvarlak div’iniz her ekrana göre doğru şekilde ölçeklenecektir. Eğer farklı bir oran kullanmak isterseniz, padding-bottom özelliğindeki yüzde değerini değiştirebilirsiniz.

#012355