Genişlik yüksekliğine göre ayarlayın

Genişliğe bağlı olarak yükseklik için çözüm gördüm: css height same as width. Veya burada: https://stackoverflow.com/a/6615994/2256981. Ama sorum bana ters geliyor.Genişlik yüksekliğine göre ayarlayın

Benim eleman: bunun için

<body> 
    <div id="square"></div> 
</body>

Stil:

body, html { 
    margin: 0; 
    height: 100%; 
    min-height: 300px; 
    position: relative; 
} 
div#square { /* My square. */ 
    height: 75%; /* It's height depends on ancestor's height. */ 
    width: 75vh; /* If supported, preliminarily sets it's width. */ 
    position: absolute; /* Centers it. */ 
    left: 50%; top: 50%; transform: translate(-50%, -50%); 
    background-color: darkorange; /* Makes it visible. */ 
}

Senaryo, kare tutar:

window.onload = window.onresize = function (event) { 
    var mySquare = document.getElementById("square"); 
    mySquare.style.width = mySquare.offsetHeight + 'px'; 
};

burada

Komple kodu: http://jsfiddle.net/je1h/hxkgfr9g/

soruaynı şeyi saf CSS'de yapmaktır. Komut dosyası yok.

kaynak

2015-04-16 jevgenij

Bunu css'de yapıp yapamayacağınızı bilmiyorum. Https://css-tricks.com/snippets/css/a-guide-to-flexbox/ adresini deneyebilirsiniz, ancak bunun size yardımcı olup olmayacağını bilmiyorum. – xdhmoore

Bu, aradığınız şeyi yapıyor mu? http://stackoverflow.com/questions/12899031/css-squares-on-resize – xdhmoore

Ayrıca, CSS'de birçok kez denemenin mümkün olmadığını düşünüyorum ... Dinamik mükemmel kareler tasarlamadan önce beklememiz gerekecek! Gördüğüm tek seçenek, aslında yazdığın gibi Javascript. – Sebastien

ben ona göre bir elemanın en boy oranını korumak için farkındayım iki Teknikleri vardır yüksekliği var:

Sen vh birimlerini kullanabilirsiniz:

yükseklik görüntü alanına göredir

div { 
 
    width: 75vh; 
 
    height: 75vh; 
 
    background:darkorange; 
 
}

<div></div>

ana öğeye yüksekliğine dayalı bir yüksekliği için
:

İstediğiniz boy oranına sahip bir kukla görüntü kullanabilirsiniz. 1 ile Örnek: 1 en boy oranına bir 1 * 1 şeffaf .png resim kullanmak ya da bir 1 * 1 base64 kodlanmış gif @vlgalik tarafından yorumladı olabilir: Bu o

html,body{ height:100%; margin:0; padding:0; } #wrap{ height:75%; } #el{ display:inline-block; height:100%; background:darkorange; } #el img{ display:block; height:100%; width:auto; }

<div id="wrap"> <div id="el"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> </div> </div>

Not son demo, yeniden boyutlandırıldığında güncellenmez. Ama en-boy oranı sayfa yüklemesinde tutulur

GÜNCELLEME:#el üzerine display:inline-flex: pencere boyutlandırma problemi üzerinde güncellenmesi çözmek gibi görünüyor ayarı the comments bildirildiği gibi
.

kaynak

2015-04-16 14:47:00

Veya Base64 Kodlanmış 1x1px şeffaf GIF veya satır içi SVG'yi kullanabilirsiniz (ancak FF'de ve SVG ile daha eski tarayıcılarda bazı sorunlar vardır). – vlgalik

@vlgalik güzel, cevabı güncelledim. –

Cevabınız için teşekkürler. Bu komik bir hack, ve dürüst olmak gerekirse, nasıl çalıştığını tam olarak anlayamadım :) Neden "#wrap" ye ihtiyacımız var. Ve sizler, sizin de belirttiğiniz gibi, ne yazık ki, pencere yeniden boyutlandırmada '#el' genişliğini güncellemez. – jevgenij

Düzenleme:. Eğer yüksekliğinin bağlı genişliğini ayarlamak istediğini Cevapsız, bu padding-alt karşıt :(sen padding-bottom kullanabilirsiniz

tüm oranlarını desteklemek için Yüzdeler yapar her zaman

/* the wrapper has a width */ 
 
.wrapper { 
 
    position: relative; 
 
    width: 25%; 
 
    margin-bottom: 10px; 
 
} 
 
/* these elements set the height (using padding-bottom) */ 
 
.square { 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
} 
 
.widescreen { 
 
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */ 
 
} 
 

 
/* 
 
* This is the content. 
 
* Needs position:absolute to not add to the width of the parent 
 
*/ 
 
.content { 
 
    /* fill parent */ 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    
 
    /* visual */ 
 
    padding: 10px; 
 
    background: orange; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <div class="square"> 
 
    <div class="content">square</div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="widescreen"> 
 
    <div class="content">16:9 ratio</div> 
 
    </div> 
 
</div>

: elemanının genişliğine göre

Sadece olumsuz yanı, bir demet sarıcı elemanına ihtiyacınız var.

kaynak

2015-04-16 15:05:03 darthmaim

Genişlik genişliğine göre yüksekliği değil, genişliğe göre buluyoruz. – JulianSoto

Genişlik yüksekliğine göre ayarlayın

cevap

İlgili konular