Soru Bir div'in yüksekliğini CSS kullanarak genişliğine orantılı olarak ölçeklendirebilir miyim?


CSS'de herhangi bir değişkeni istediğim gibi div yükseklikimin her zaman genişliğinin yarısı olması için div boyutunun div için ekran boyutu genişliği ile yüzde cinsinden olduğunu

<div class="ss"></div>

CSS:

.ss {
    width:30%;
    height: half of the width;
}

Bu% 30 genişlik, ekran çözünürlüğü ile ölçeklendirir


52
2018-01-17 12:21


Menşei


çok nazik olduğun için teşekkürler - spiderman
Görmek CSS: Bir DIV'yi yeniden boyutlandırırken en boy oranını korumanın bir yolu? - thgaskell
olası kopyası CSS: Bir DIV'yi yeniden boyutlandırırken en boy oranını korumanın bir yolu? - Qtax


Cevaplar:


Bir ana öğe üzerinde dolgu yapmak suretiyle yapabilirsiniz, çünkü göreceli dolgu (yükseklik yüksekliğinde bile olsa) ana öğenin genişliğini temel alır.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

Ayrıntılar için konuyla ilgili bu makaleye bakın. http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/


86
2018-02-15 13:57



Çok iyi çalışıyor! Bir çocuk düğümü ve yasssss ile bir div üzerinde denedim. - rardoz
Zeki. padding-bottom için alan yaratmak img... - Michael Freeman
Bu CSS'nin burada ve orada her türlü tuhaflığı var. Yine de işe yarıyor. - Ghasan Al-Sakkaf
Omg teşekkür ederim !!!!!!!!!!!!!!!!!!!! - user3808307


Bunu başarmanın diğer bir harika yolu, bir en boy oranına sahip saydam bir görüntü kullanmaktır. Ardından görüntünün genişliğini% 100 ve yüksekliği otomatik olarak ayarlayın. Bu ne yazık ki kabın orijinal içeriğini aşağı itecektir. Bu yüzden, orijinal içeriği başka bir div'a sarmanız ve kesinlikle ebeveyn divunun üstüne yerleştirmeniz gerekiyor.

<div class="parent">
   <img class="aspect-ratio" src="images/aspect-ratio.png" />
   <div class="content">Content</div>
</div>

CSS

.parent {
  position: relative;
}
.aspect-ratio {
  width: 100%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}

9
2018-02-20 19:43



Bu sadece benim için ayarlanmıştı height: 100%; içinde .content. İpucu için teşekkürler. Bu yöntemi dolgudan daha iyi seviyorum. - Ture Flase
Soru, "CSS kullanarak", HTML'ye yeni öğeler eklemekten daha iyidir - Diego Betto


Ekteki bir öğede piksel cinsinden ayarlanmış bir genişliğe orantılı dikey boyutlandırma yapmak isterseniz, aşağıdaki gibi ekstra bir öğeye ihtiyacınız olduğuna inanıyorum:

#html

<div class="ptest">
    <div class="ptest-wrap">
        <div class="ptest-inner">
            Put content here
        </div>
    </div>
</div>

#css
.ptest {
  width: 200px;
  position: relative;
}

.ptest-wrap {
    padding-top: 60%;
}
.ptest-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
}

İşte çalışmayan 2 div çözümü. % 60 dikey dolgunluğun pencere genişliğiyle orantılı olduğunu unutmayın. div.ptest Genişlik:

http://jsfiddle.net/d85FM/

İşte yukarıdaki kodla ilgili örnek:

http://jsfiddle.net/mmq29/


3
2018-02-12 20:24





Ölçeklenebilir bir çözüm arayan herkes için: SASS'de farklı kesme noktaları için duyarlı orantılı dikdörtgenler oluşturmak için küçük bir yardımcı program yazdım. Şuna baksana SASS Oranları 

Umarım herkese yardım eder!


1
2018-05-18 22:50





Bu cevap, birçok sınıf ismini kullanmayı tercih etmemek dışında, diğerleri ile aynıdır. Ama bu sadece kişisel tercih. Her divanda sınıf isimlerini kullanmanın, iç içe geçmiş divların amacını ortaya koyduğundan daha şeffaf olduğunu iddia edebilirsiniz.

<div id="MyDiv" class="proportional">
  <div>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

İşte genel CSS:

.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

Ardından, genişlik ve yüksekliği ayarlamak için ilk iç divı hedefleyin (padding-top):

#MyDiv > div { width:200px; padding-top:50%; }

0
2018-02-12 05:47