divPencerenin genişliği değiştikçe genişliğini / yüksekliğini değiştirebilecek bir oluşturmak istiyorum .

En boy oranını korurken yüksekliğin genişliğe göre değişmesine izin verecek herhangi bir CSS3 kuralı var mı?

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

Bunun için <div>yüzde değeri olan bir sarıcı oluşturun padding-bottom:

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

/* demonstration purposed only : non-essential */
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

<div class="demoWrapper">
  <div></div>
</div>

<div>Yüksekliği, kabının genişliğinin% 75'ine eşit bir yüksekliğe neden olacaktır (4: 3 en boy oranı).

Bu, dolgu için:

Yüzde, oluşturulan kutunun içeren bloğun genişliğine göre hesaplanır [...] (kaynak: w3.org , benimki vurgu)

Diğer en boy oranları ve% 100 genişlik için dolgu alt değerleri:

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

Div içerisine içerik yerleştirme:

Div'ın en boy oranını korumak ve içeriğinin esnemesini önlemek için, kesinlikle konumlandırılmış bir çocuk eklemeniz ve sarma makinesinin kenarlarına şu şekilde germeniz gerekir:

div.stretchy-wrapper {
  position: relative;
}

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

İşte bir demo ve daha ayrıntılı bir demo

vw birimler:

Birimin vwhem genişliği hem de yüksekliği için birimleri kullanabilirsiniz . Bu, görünüm alanı genişliğine bağlı olarak öğenin en boy oranının korunmasını sağlar.

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

Alternatif olarak, aynı zamanda kullanabilir vhgörünüm yüksekliği, ya da vmin/ vmax(tartışma görüntü alanı boyutları daha az / daha fazla kullanımı 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 bölmeli ızgara

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 bu demo ile bir Keman ve burada dikey ve yatay merkezli içeriği ile duyarlı bir kareler ızgarası yapmak için bir çözüm .

Vh / vw birimleri için tarayıcı desteği IE9 + dır.

Bunu CSS kullanarak yapmanın bir yolunu buldum, ancak kendi web sitenizin akışına bağlı olarak değişebileceğinden dikkatli olmalısınız. Web sitemin bir akışkan genişliği bölümünde sabit bir en boy oranı ile video 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 bunu "video" sınıfına sahip bir div içine yerleştirebilirsiniz. Bu video sınıfı, büyük olasılıkla web sitenizdeki akışkan öğesi olacaktır, öyle ki, kendi başına 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ğinde değişecektir. Bu, muhtemelen videonun belirli bir en boy oranını korurken gömülü videonuzu içeri almaya çalıştığınız öğedir.

Bunu yapmak için, "video" sınıf div içindeki gömülü nesnenin önüne bir görüntü koymak.

!!! Önemli olan kısım, 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, düzeninize bağlı olarak, videonun beklediğiniz en küçük boyutta (veya AR'yi koruduğunuz her şeyin) kadar küçük olduğundan emin olun. Bu, yüzde yeniden boyutlandırıldığında görüntünün çözünürlüğündeki olası sorunları önler. Örneğin, 3: 2 en boy oranını korumak istiyorsanız, yalnızca 3 piksele 2 piksellik bir resim kullanmayın. Bazı durumlarda işe yarayabilir, ancak test etmedim ve muhtemelen kaçınmak iyi bir fikir olacaktır.

Büyük olasılıkla, web sitenizin akışkan öğeleri için tanımlanan bunun gibi bir minimum genişliğe sahip olmalısınız. Değilse, tarayıcı penceresi çok küçük olduğunda öğelerin kesilmesini veya örtüşmesini önlemek için bunu yapmak iyi bir fikirdir. Bir noktada bir kaydırma çubuğuna sahip olmak daha iyidir. Bir web sayfasının alması gereken en küçük genişlik ~ 600 piksel civarında (sabit genişlikli sütunlar dahil) bir yerdedir, çünkü telefon dostu sitelerle uğraşmadıkça ekran çözünürlükleri daha küçük olmaz. !!!

Tamamen şeffaf bir png kullanıyorum, ancak doğru yaparsanız bunun önemli olduğunu düşünmü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 gömme koduyla gelen nesne ve gömme etiketlerindeki açık yükseklik veya genişlik bildirimlerini kaldırdığınızdan emin olun.

Çalışma şekli, video sınıfı öğesinin konum özelliklerine ve istediğiniz öğenin belirli bir en boy oranını korumasına bağlıdır. Bir öğede yeniden boyutlandırıldığında görüntünün uygun en boy oranını koruma yönteminden yararlanır. Video sınıfı öğesinde başka ne varsa, genişliğini / yüksekliğini görüntü tarafından ayarlanan video sınıfı öğesinin% 100'üne zorlayarak dinamik görüntü tarafından sağlanan gayrimenkulden tam olarak yararlanmasını söyler.

Çok havalı, ha?

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

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

aspectratio.png benim durumumda 30x10 piksel, tercih edilen 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 (fe on caniuse.com ).

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

Div'inizin% 100 dışında bir genişlik olmasını istiyorsanız, genişliği ayarlamak için başka bir sarma divına 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 çözünürlüğüne bağlı olarak farklı bir logo dosyası sunmak için CSS medya sorgularını kullanmama izin vermek için yakın zamanda Elliot'un görüntü numarasına benzer bir şey kullandım, ancak yine <img>de doğal olarak yaptığı gibi orantılı olarak ölçeklendirdim (logoyu arka plan görüntüsü olarak şeffaf bir .png olarak ayarladım doğru en boy oranıyla). Ancak Web_Designer'ın çözümü bana bir http isteği kaydeder.

Burada w3schools.com'da belirtildiği ve kabul edilen bu cevapta bir şekilde tekrarlandığı gibi, değerler yüzde olarak dolduruluyor (vurgu mayın):

Dolguyu içeren öğenin genişliğinin yüzdesi olarak belirtir

Ergo, 16: 9 en boy oranını koruyan duyarlı bir DIV'nin doğru örneği aşağıdaki gibidir:

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

@ Web-tiki zaten kullanmanın bir yolunu gösterdiğinden vh/ vw, ayrıca ekranda ortalamanın bir yoluna ihtiyacım var, burada 9:16 portre için bir snippet kodu var .

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

translateYbu merkezi ekranda tutacaktır. calc(100vw * 16 / 9)9/16 için beklenen yükseklik. (100vw * 16 / 9 - 100vh)taşma yüksekliğidir, bu yüzden yukarı çekin overflow height/2onu ekranda ortada tutacaktır.

Manzara için ve 16: 9'u sakla ,

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

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

Farklı ekran boyutlarına uyum sağlamak isterseniz,

• arka plan boyutu kapak / içerir
  • Yukarıdaki stil içermeye benzer, genişliğe bağlıdır: yükseklik oranı.
• nesneye uygun
  • img / video etiketi için cover / içerir
• @media (orientation: portrait)/@media (orientation: landscape)
  • Oranı değiştirmek portrait/ landscapeiçin medya sorgusu .

Bu, kabul edilen cevapta bir gelişmedir:

• Sarıcı div değerleri yerine sözde öğeler kullanır
• En boy oranı, üst öğesi yerine kutunun genişliğini temel alır
• İçerik daha uzun olduğunda kutu dikey olarak gerilir

.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>

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

Izgara öğesi, hangisinin yüksekliği ayarladığını belirtmeye gerek kalmadan iki (veya daha fazla) öğeyle aynı alanı işgal etmenizi sağlar. Bu, kutudan çıktıkça daha uzun olanın oranı ayarladığı anlamına gelir .

Bu, içeriğin "tüm oranı" doldurmaya yetecek 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ıyorsunuz (yani her iki yönde de kullanmak için display:flex; align-items:center; justify-content:center).
Hemen hemen şeffaf kullanarak aynı şey <img>ile display:blockharicinde ve önceden belirlenmiş oran <svg>daha hafif ve değiştirmek için oldukça kolaydır (eğer gerektiğinde, duyarlı olacak oranını değiştirmek için).

<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;
}

Tek yapmanız gereken <svg>s oranını değiştirmek :

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

Çalıştığını 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 gizli veya otomatik olarak), position:relativeızgarada ve position:absolute; height:100%; overflow-y: auto;içerikte ayarlamanız gerekir . Misal:

.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>

Çözümlerinize dayanarak biraz hile yaptım:

Bunu kullandığınızda, HTML kodunuz 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 buna sahipseniz sadece data-keep-ratioyükseklik / genişliğe attr ayarladınız ve hepsi bu.

Bir svg kullanabilirsiniz. Konteyner / ambalaj konumunu göreceli hale getirin, svg'yi statik olarak konumlandırılmış olarak yerleştirin ve daha sonra kesinlikle konumlandırılmış içerik koyun (ü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 kodlayabilir ve img src özniteliğine şu şekilde 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%;" />

SCSS benim durumumda en iyi çözüm; bir veri özelliğ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

Çoğu yanıt çok güzel olsa da, çoğunun zaten doğru boyutta bir görüntüye sahip olması gerekir ... Diğer çözümler yalnızca genişlik için çalışır ve mevcut yüksekliğe dikkat etmez, ancak bazen içeriği belirli bir yüksekliğe sığdırmak da 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çeklendirilmesi için kullanmaktır, ancak önceden oluşturulmuş bir görüntü veya herhangi bir form kullanmak yerine bir satır içi svg öğesi kullanmaktır. 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ü sadece küçülebileceği için beklenen maksimum boyuttan daha büyük olması gerektiğine dikkat edin. Örnek div oranını 10: 5 yapar

Sadece bir fikir ya da hack.

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>

diyelim ki 2 div var dış div bir kap ve iç oranını korumak için ihtiyacınız olan herhangi bir öğe 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 -->

"eleman" oranını korumanız gerektiğini varsayalım

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

css şö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 */
}

% olarak belirtildiğinde dolgu, yüksekliğe değil genişliğe göre hesaplanır. .. yani temelde sizin genişliğinizin yüksekliği her zaman buna göre hesaplanacaktır. oranını koruyacak.

Dikey veya yatay görünümde görünüm alanının içine bir kare sığdırmak istiyorsanız (olabildiğince büyük, ancak dışarıya yapışan hiçbir şey yoksa) vw/ vhyönünü portrait/ arasında kullanma arasında geçiş yapın landscape:

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

imgBelirli bir en boy oranını dolduran bir etiketin olduğu çözümümü paylaşmak istiyorum . Ben kullanamadı backgroundçünkü CMS desteği eksikliği ve bu yüzden böyle bir stil etiketi kullanmayı tercih istemem: <img style="background:url(...)" />. Ayrıca, genişlik% 100'dür, bu nedenle bazı çözümlerde olduğu gibi sabit bir boyutta ayarlanması gerekmez. Duyarlı bir şekilde ölçeklendirilecek!

.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>

Ben bu sorunu oldukça zaman geçirdim, bu yüzden bunun için bir JS çözüm yaptı. Bu, temel olarak domElement öğesinin yüksekliğini, belirttiğiniz orana göre öğenin genişliğine göre ayarlar. Aşağıdaki gibi kullanabilirsiniz:

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

Öğenin yüksekliğini ayarladığından, öğenin a display:blockveya olması gerektiğini lütfen unutmayın display:inline-block.

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

Bunu SVG kullanarak yapabilirsiniz.

Bir duruma bağlıdır, ancak bazılarında gerçekten yararlıdır. Örnek olarak - background-imagesabit yüksekliği ayarlamadan ayarlayabilir veya <iframe>oran 16:9ve position:absolutebenzeri ile youtube gömmek için kullanabilirsiniz .

İçin 3:2oran seti viewBox="0 0 3 2"ve bu kadar.

Misal:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

Genişlik: 100 piksel ve Yükseklik: 50 piksel (yani, 2: 1) değerini korumak istediğinizi varsayalım.

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

Akı düzenini (FWD) kullanabilirsiniz.

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

Düzeni ölçeklendirir ve korur, biraz karmaşıktır, ancak (RWD) gibi içeriği zorlamadan bir sayfanın 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/

Tuval öğesini kullanarak en boy oranını korumanın basit bir yolu.

Eylemde görmek için aşağıdaki div'i yeniden boyutlandırmayı deneyin.

Benim için bu yaklaşım en iyi sonucu verdi, bu yüzden onlardan da yararlanabilmek için başkalarıyla paylaşıyorum.

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Ayrıca dinamik yükseklik ile çalışır!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Yeni bir çözüm kullandım.

.squares{
  width: 30vw
  height: 30vw

Ana en boy oranına

.aspect-ratio
  width: 10vw
  height: 10vh

Ancak, bu tüm görünüm alanına göredir. Bu nedenle, görünüm alanı genişliğinin% 30'u olan bir div'e ihtiyacınız varsa, bunun yerine 30vw kullanabilirsiniz ve genişliği bildiğiniz için, calc ve vw birimini kullanarak bunları yükseklikte yeniden kullanırsınız.

Son zamanlarda aspect-ratiomülkü CSS'de kullanma olanağını aldık .

https://twitter.com/Una/status/1260980901934137345/photo/1

Not: Destek henüz en iyisi değil ...

https://caniuse.com/#search=aspect-ratio

Tüm kap yapısı yüzdeye dayalıysa, bu varsayılan davranış olur, daha spesifik bir örnek verebilir misiniz?

Aşağıda, ana üst hiyerarşinizin tamamı% tabanlıysa, herhangi bir tarayıcı penceresi ayarlaması ek js / css olmadan çalışırsa, bu, mizanpajınızla ilgili bir olasılık değil mi?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>