En boy oranı resim kartı

aspect-ratio özelliği ile kartı yeniden boyutlandırdığınızda yeşil görsel blok, bu 16 x 9 en boy oranını korur. aspect-ratio: 16 / 9 ile en boy oranına saygı duyuyoruz.

.video {
  aspect-ratio: 16 / 9;
}

Bu özellik olmadan 16 x 9 en boy oranını korumak için bir padding-top parçası kullanmanız ve en yüksek genişlik oranını ayarlamak için 56.25% değerine kadar dolgu yapmanız gerekir. Kısa bir süre içinde, saldırıyı ve yüzdeyi hesaplama zorunluluğunu önleyecek bir özelliğimiz olacak. 1 / 1 oranında bir kare, 2 / 1 oranı ise 2'ye 1 oranında ve bu resmin belirli bir boyut oranıyla ölçeklendirilmesi için gereken her şeyi oluşturabilirsiniz.

.square {
  aspect-ratio: 1 / 1;
}

HTML

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}