CSS: eni

Question

Benim soruya div yüksekliği göreceli tutulması bu soruya çok benzer: CSS: 100% width or height while keeping aspect ratio?

Kimin yeri sabittir bir div var. Div'in genişlik% 100 ve yüksekliğigenişliğinin genişliğinin 1/6'sı kadar olmalıdır. Bunu yapmak için bir -webkit-calc() yolu var mı?

Not: JS çözümleri bir büyütme/yönelim olarak tercih edilmez genişlik/yükseklik etkileyebilir.

Answer 1

için yorumun ikinci öneri bu sonra ne mi taşındı? Hiç -webkit-calc() kullanmıyorum. Bir 6px görüntüye, position: fixed uygulanan bir div içine ekledim ve görüntüyü width ve position: relative olması için ayarlayın. Daha sonra ataları kadar yüksek ve geniş olacak şekilde yerleştirilmiş bir iç div ekledim.

Şimdi dış div genişliğini değiştirebilir ve görüntüleri width: 100% ayar sağlayacaktır hem dış ve iç div '(ler her zaman kendi genişliğinin 1/6 eşit olan bir yüksekliğe sahip garanti edilir veya En azından olabildiğince tam olarak eşit olan yükseklikler, en yakın piksel sayısına yuvarlanacaktır. Herhangi bir içerik iç div içinde gidebilir.

HTML

<div> 
    <div></div> 
    <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" /> 
</div> 

CSS

html, body { 
    margin: 0px; 
    padding: 0px; 
} 
div { 
    position: fixed; 
    width: 100%; 
} 
div > div { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
} 
img { 
    width: 100%; 
    display: block;  
    position: relative; 
} 

Burada istenen davranışı gösteren jsFiddle bu.

Answer 2

hep div genişliğinin böyle ayarlayabilirsiniz:

$('#div1').css("width", $('#div1').height()/6); 

DÜZENLEME:

veya böyle bir şey kullanabilirsiniz:

/* Firefox */ 
width: -moz-calc(100%/6); 
/* WebKit */ 
width: -webkit-calc(100%/6); 
/* Opera */ 
width: -o-calc(100%/6); 
/* Standard */ 
width: calc(100%/6); 

Bu yalnızca bir örnektir - .. Ama css dosyasındaki bir pikseldeki bir div yüksekliğini elde etmek imkansızdır.

EDI için jquery kullanmanız gerekir T:

$('#div1').css("height", window.width()/6); 

Answer 3

jQuery kullanabileceği bir genişlikte

yüksekliği 1/6, ör

$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width()/6); okunabilirliği

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);}); 

Answer 4

Responsive square columns numaralı belgede anlattığım çözümü de kullanabilirsiniz.

Bu,% padding-top/bottom ve margin-top/bottom'un ana öğenin açıklığına göre hesaplandığı gerçeğine dayanır.

böyle olmazdı durumunuza Uyarlanmış:

FIDDLE

HTML:

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

CSS: çözüm için

.wrap{ 
    position:fixed; 
    width:100%; 
    padding-bottom:16.666%; /* 100x1/6 = 16.666...*/ 
} 
.content{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}