it-swarm.dev

Bir div'in CSS ile en boy oranını koru

Pencerenin genişliği değiştikçe genişliğini/yüksekliğini değiştirebilen bir div oluşturmak istiyorum.

Boy oranının genişliğe göre değişmesine izin verecek herhangi bir CSS3 kuralı var mı, en/boy oranını koruyarak?

Bunu JavaScript ile yapabileceğimi biliyorum, ancak yalnızca CSS kullanmayı tercih ederim.

 div keeping aspect ratio according to width of window

895
jackb

Bunun için <div> için yüzde değerine sahip bir sarmalayıcı padding-bottom oluşturun:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}
<div></div>

Bu, kabının genişliğinin% 75'ine eşit yükseklikte bir <div> ile sonuçlanacaktır (4: 3 en boy oranı).

Bu dolgu için gerçeğine dayanır:

Yüzde, oluşturulan kutunun [...] bloğunun genişliğine göre hesaplanır (kaynak: w3.org , benimkinin vurgusu)

Diğer en boy oranları ve% 100 genişlik için dolgular-alt:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

İçeriği div'e yerleştirme:

Div'in en boy oranını korumak ve içeriğinin esnetmesini önlemek için, kesinlikle konumlandırılmış bir çocuk eklemeniz ve onu paketleyicinin kenarlarına gerdirmeniz gerekir:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

İşte bir demo ve bir diğeri daha derinlikte demo

1191
Web_Designer

vw birim:

Öğenin hem genişliği ve yüksekliği için vw birimleri kullanabilirsiniz. Bu, elemanın en boy oranının, görünüm genişliğine göre korunmasını sağlar.

vw: Vizör genişliğinin 1/100'ü. [MDN]

Alternatif olarak, görünüm yüksekliği için vh veya görünüm alanı boyutlarından daha küçük/daha büyük kullanmak için vmin/vmax kullanabilirsiniz (tartışma burada ).

Örnek: 1: 1 en boy oranı

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}
<div></div>

Diğer en boy oranları için, elemanın genişliğine göre yükseklik değerini hesaplamak için aşağıdaki tabloyu kullanabilirsiniz:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Örnek: 4x4 kare divs ızgarası

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

İşte Fiddle bu demo ile ve işte dikey ve yatay merkezli içeriğe sahip duyarlı kareler ızgarası yapmak için bir çözüm.


Vh/vw birimleri için tarayıcı desteği IE9 + 'ya bakınız daha fazla bilgi için canIuse

383
web-tiki

Bunu CSS kullanarak yapmanın bir yolunu buldum, ancak kendi web sitenizin akışına bağlı olarak değişebileceği için dikkatli olmalısınız. Videoyu web sitemin akışkan genişliği kısmında sabit bir en boy oranıyla gömmek için yaptım.

Bunun gibi gömülü bir videonuz olduğunu varsayalım:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Daha sonra bunları "video" sınıfı olan bir div içine yerleştirebilirsiniz. Bu video sınıfı muhtemelen web sitenizdeki akışkan unsur olacaktır; öyle ki, doğrudan yükseklik kısıtlamaları yoktur, ancak tarayıcıyı yeniden boyutlandırdığınızda web sitesinin akışına göre genişliği değişecektir. Bu, muhtemelen videonun belirli bir en boy oranını korurken gömülü videonuzu almaya çalıştığınız öğe olacaktır.

Bunu yapmak için, "video" class div içindeki gömülü nesnenin önüne bir görüntü koydum. 

!!! Önemli olan, görüntünün korumak istediğiniz doğru en boy oranına sahip olmasıdır. Ayrıca, görüntünün boyutunun AT LEAST olduğundan emin olun, videonun (ya da A.R.’nı ne koruyorsanız) düzeninize göre en küçük boyutta olmasını bekleyin. Bu, görüntünün yeniden boyutlandırıldığında çözünürlüğündeki olası sorunları önler. Örneğin, 3: 2 en boy oranını korumak istiyorsanız, yalnızca 3 piksel x 2 piksel bir resim kullanmayın. Bazı durumlarda işe yarayabilir, ancak test etmedim ve muhtemelen kaçınmak iyi bir fikir olacaktır. 

Muhtemelen zaten web sitenizin akışkan elemanları için tanımlanmış olan minimum genişliğe sahip olmalısınız. Değilse, tarayıcı penceresi çok küçük olduğunda öğeleri kesmekten veya üst üste binmekten kaçınmak için bunu yapmak iyi bir fikirdir. Bir noktada bir kaydırma çubuğu olması daha iyidir. Bir web sayfasının alması gereken en küçük genişlik ~ 600px civarında (herhangi bir sabit genişlik sütunu dahil) bir yerdedir, çünkü telefon dostu sitelerle çalışmadığınız sürece ekran çözünürlükleri küçülmez. !!!

Tamamen şeffaf bir png kullanıyorum, ancak doğru yaparsanız önemli olduğunu sanmıyorum. Bunun gibi:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Şimdi aşağıdakine benzer bir CSS ekleyebilmeniz gerekir:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Ayrıca, genellikle kopyala/yapıştırılan gömme koduyla birlikte gelen nesne ve gömme etiketlerinin içindeki açık yükseklik veya genişlik bildirimlerini de kaldırdığınızdan emin olun.

Çalışma şekli, video sınıfı öğesinin konum özelliklerine ve istediğiniz en boy oranına sahip olmasını istediğiniz öğeye bağlıdır. Bir görüntünün, bir öğede yeniden boyutlandırıldığında uygun en boy oranını koruyacağından yararlanır. Video sınıfı öğesinde ne varsa, dinamik görüntü tarafından sağlanan emlaktan tam olarak yararlanmasını, genişlik/yüksekliğini görüntü tarafından ayarlanan video sınıfı öğesinin% 100'üne zorlayarak bildirir. 

Çok havalı ha?

Kendi tasarımınızla çalışmasını sağlamak için biraz onunla oynamak zorunda kalabilirsiniz, ama bu aslında benim için şaşırtıcı derecede iyi çalışıyor. Genel kavram orada.

25
forgo

Elliot bana bu çözüme ilham verdi - teşekkürler:

aspectratio.png, benim durumumda 30x10 piksel olan tercih ettiğiniz en boy oranına sahip tamamen şeffaf bir PNG dosyasıdır.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Lütfen dikkat:background-size, hedef tarayıcılarınızla çalışmayabilecek bir css3 özelliğidir. Birlikte çalışabilirliği kontrol edebilirsiniz (örneğin caniuse.com adresinde).

14
florianb

Web_Designer'ın cevabına eklemek için, <div>, içeren elemanın genişliğinin% 75'i kadar bir yüksekliğe (tamamen alt dolgudan oluşur) sahip olacaktır. İşte güzel bir özet: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Neden böyle olması gerektiğinden emin değilim, ama öyle.

Div'inizin% 100 dışında bir genişlik olmasını istiyorsanız, genişliği ayarlamak için başka bir sarma divine ihtiyacınız vardır:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Cihazın çözünürlüğüne bağlı olarak farklı bir logo dosyası sunmak için CSS medya sorgularını kullanmama izin vermek için son zamanlarda Elliot'un imaj numarasına benzer bir şey kullandım, ancak yine de bir <img> doğal olarak yapacağım şekilde orantılı bir şekilde ölçeklendirdim (logoyu arka plan resmi olarak saydam olarak ayarladım). png doğru boy oranıyla). Ancak Web_Designer'ın çözümü bana bir http isteği kaydederdi.

13
nabrown

Burada w3schools.com adresinde de belirtildiği gibi ve bu kabul edilen cevap içinde yinelenen değerler, yüzde olarak dolgu değerleri (benimkine önem ver):

Dolguyu, içeren elemanın genişliğinin yüzdesi olarak belirtir.

Ergo, 16: 9 en boy oranını koruyan, hassas bir DIV'nin doğru bir örneği şöyledir:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

JSFiddle'da Demo

11
Marc A

Çözümlerine dayanarak bazı numaralar yaptım:

Kullandığınızda, HTML’niz yalnızca

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Bu şekilde kullanmak için: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

ve js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

Ve bunun için sadece attr data-keep-ratio 'i yükseklik/genişlik olarak ayarlayın.

8
pie6k

Bir svg kullanabilirsiniz. Konteynır/sarıcı konumunu göreceli yapın, svg'yi önce statik olarak yerleştirin ve sonra kesinlikle konumlandırılmış içeriği yerleştirin (üst: 0; sol: 0; sağ: 0; alt: 0;)

16: 9 oranlı örnek:

image.svg: (src ile satır içine alınabilir)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Satır içi svg'nin işe yaramadığını unutmayın, ancak svg'yi urencode edebilir ve bu şekilde img src niteliğine gömebilirsiniz:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
7
Maciej Krawczyk

@ Web-tiki zaten vh/vw kullanmanın bir yolunu gösterdiği için, aynı zamanda ekranda ortalamanın bir yoluna ihtiyacım var, işte 9 : 16 portre.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY bu merkezi ekranda tutacaktır. calc(100vw * 16 / 9) 9/16 .(100vw * 16 / 9 - 100vh) için taşma yüksekliği bekleniyor, bu nedenle yukarı çekme overflow height/2 ekranda ortalanacak.

Manzara için ve 16: 9 öğelerini saklayın.

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16 oranı kolayca değiştirilebiliyor, önceden tanımlanmaya gerek yok 100:56.25 veya 100:75 Önce yüksekliği sağlamak istiyorsanız, genişliği ve yüksekliği değiştirmelisiniz, örn. 9:16 portre için height:100vh;width: calc(100vh * 9 / 16).

Farklı ekran boyutlarına adapte olmak istiyorsanız, ilginizi çekebilir.

  • arkaplan büyüklüğü kapak/içerir
    • Yukarıdaki stil içermeye benzer, genişliğe bağlıdır: yükseklik oranı.
  • nesneye uyum
    • kapak/img/video etiketi için içerir
  • @media (orientation: portrait)/@media (orientation: landscape)
    • Oranı değiştirmek için portrait/landscape için ortam sorgusu.
7
wener

Bu kabul edilen cevapta bir gelişmedir:

  • Sarıcı divs yerine sahte elemanları kullanır
  • En boy oranı, üst yerine kutunun genişliğine dayanır.
  • İçerik daha uzun olduğunda kutu dikey olarak gerilecektir

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}
<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

7
Salman A

SCSS benim durumumdaki en iyi çözüm; veri niteliği kullanarak:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

Örneğin :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

kaynak

4
gordie

diyelim ki 2 div var, dış div bir konteynırdır ve iç, oranını korumak için ihtiyaç duyduğunuz herhangi bir unsur olabilir (img veya bir youtube iframe veya her neyse)

html şöyle görünür: 

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

diyelim ki "element" oranını korumalısınız 

oran => 4 ila 1 veya 2 ila 1 ...

css böyle görünüyor 

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

% cinsinden belirtildiği zaman dolgu yüksekliği değil yükseklik cinsinden hesaplanır ... bu nedenle temelde genişlik ölçüsü ne kadar olursa olsun her zaman buna bağlı olarak hesaplanır. oranı koruyacak. 

3
aeid

Cevapların çoğu çok güzel olsa da, birçoğunun hali hazırda doğru boyutta olması gerekir ... Diğer çözümler yalnızca genişlik için çalışırlar ve mevcut yükseklikle ilgilenmezler, ancak bazen içeriği de belirli bir yüksekliğe sığdırmak istersiniz .

Tamamen taşınabilir ve yeniden boyutlandırılabilir bir çözüm getirmek için onları bir araya getirmeye çalıştım ... Hile, bir görüntünün otomatik ölçeklenmesinde kullanmak, ancak önceden oluşturulmuş bir görüntü veya herhangi bir biçim kullanmak yerine satır içi svg öğesi kullanmak. ikinci HTTP isteği ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}
<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

SVG'nin genişlik ve yükseklik özelliklerinde büyük değerler kullandığımı, çünkü yalnızca küçülebileceğinden maksimum beklenen boyuttan daha büyük olması gerektiğini fark ettim. Örnek div oranını 10: 5 yapıyor

2
Salketer

Sadece bir fikir ya da bir kesmek.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}
<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

2
Orland

Portreye dikey veya yatay görünümde bir kare sığdırmak istiyorsanız (olabildiğince büyük, ancak dışarıda hiçbir şey yapışmaz), vw/vh yönünü kullanma portrait/landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 
1
MoonLite

Bu konuyla epeyce karşılaştım, bu yüzden bunun için bir JS çözümü yaptım. Bu, temel olarak domElement öğesinin yüksekliğini, öğenin genişliğine göre belirttiğiniz orana göre ayarlar. Aşağıdaki gibi kullanabilirsiniz:

<div ratio="4x3"></div>

Lütfen öğenin yüksekliğini ayarladığı için öğenin bir display:block veya display:inline-block olması gerektiğini unutmayın.

https://github.com/JeffreyArts/html-ratio-component

1
user007

Genişlik: 100 piksel ve Yükseklik: 50 piksel (yani, 2: 1).

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
0
Syed

Çözümümü paylaşmak istiyorum, burada belirli bir en boy oranını dolduran bir img- etiketim var. CMS desteği olmadığı için background kullanamadım ve böyle bir stil etiketi kullanmayı tercih etmedim: <img style="background:url(...)" />. Ayrıca, genişlik% 100 olduğundan, bazı çözümlerde olduğu gibi sabit bir boyuta ayarlanması gerekmez. Duyarlı bir şekilde ölçeklenecek!

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}
<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>
0
LaVomit

Akı düzenini (FWD) kullanabilirsiniz.

https://en.wikipedia.org/wiki/Adaptive_web_design

Düzeni ölçeklendirir ve korur, biraz karmaşıktır ancak bir sayfanın (RWD) gibi içeriği zorlamadan yeniden boyutlandırılmasını sağlar.

Duyarlı gibi görünüyor ama ölçekleniyor. https://www.youtube.com/watch?v=xRcBMLI4jbg

CSS ölçeklendirme formülünü burada bulabilirsiniz:

http://plugnedit.com/pnew/928-2/

0
user1410288

<svg> ve display:grid kullanarak akıllı bir çözüm üzerine tökezledi. 

Izgara öğesi, hangisinin yüksekliğini belirlemeye gerek kalmadan iki (veya daha fazla) öğe ile aynı alanı kullanmanıza izin verir. Bu, kutudan uzun olanı oranını belirler.

Bu, içeriğin hiçbir zaman "oranı" dolduracak kadar uzun olmayacağını bildiğiniz gibi kullanabileceğiniz anlamına gelir ve içeriği yalnızca bu alana yerleştirmenin bir yolunu arıyorsanız (yani her iki yöne de ortalamak için) display:flex; align-items:center; justify-content:center).
<img> ve önceden belirlenmiş orana sahip saydam bir display:block kullanmak, <svg> daha hafif ve değiştirilmesi kolay (ancak oranı duyarlı bir şekilde değiştirmek gerekirse) değiştirmek oldukça kolaydır.

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>
.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

Yapmanız gereken tek şey <svg>s oranını değiştirmek:

  • <svg viewBox="0 0 4 3"></svg>
  • <svg viewBox="0 0 16 9"></svg>

Çalışırken görün: 

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>


İçerik öğesinin daha uzun olduğunda oranı ayarlamasına izin verilmeyen bir çözüme ihtiyacınız varsa (taşma gizlenmiş veya otomatik), ızgarada position:relative ve içerikte position:absolute; height:100%; overflow-y: auto; ayarlamanız gerekir. Örnek: 

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/1/1;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not needed */
  border: 1px solid red;
  padding: 0 1rem;
}
<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.

<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.

<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
  </div>
</div>

0
Andrei Gheorghiu