Tarayıcıyı yeniden boy olduğunda genişliği ile değiştiren bir yükseklik (Kare en boy oranını korumak için bir kap ayarlar aşağıdaki kodu var.

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Nasıl dikey olarak kabın içindeki IMG align miyim? Benim tüm görüntüleri değişken boyutlara sahip ve kapsayıcı duyarlı, çünkü sabit yükseklik/satır yüksekliği olabilir mi... Lütfen yardım edin!

Burada bir iç satır içi öğeleri hizalamak için bir tekniküstyatay ve dikey olarak aynı anda

Dikey Hizalama

1)Bu yaklaşımda, (veya geçen)ilk çocuğu olarak inline-block (sözde) bir öğe oluşturunüstve 100% height özelliği onun bütün boyunu ayarlayınüst.

2)Ayrıca, vertical-align: middle ınline tutar ekleme (blok) satır boşluk ortasında elemanları. Yani, beyanname CSS olduğunu da eklemek istiyoruzbirinci çocukvebizim eleman(resim).

3)Arasında beyaz boşluk karakteri kaldırmak için son olarak(blok) satır içiöğeleri, yazı tipi boyutunu ayarlayabilir miyizüstfont-size: 0; sıfır.

Not:image replacement technique aşağıdaki Nicolas Gallagher kullandım.

Avantajları nelerdir?

• ( . Konteyner ^em>üstdinamik boyutları.

• Görüntü öğesinin boyutlarını açıkça belirtmek gerek yok.

• Kolayca dinamik bir içerik (yükseklik ve/veya genişlik) olabilir align a <div> element vertically bu yaklaşım kullanın; edebiliriz. Ama yeniden ayarlamak için içindeki metin görüntülemek için div font-size özelliği var unutmayın.Online Demo.

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

Çıktı

Duyarlı Kap

Bu bölümde OP zaten duyarlı bir kap oluşturmak için nasıl bildiği gibi bu soru önemli değildir. Ancak, nasıl çalıştığını açıklayacağım.

Bu hale getirmek içinyükseklikonun kapsayıcı öğe ile değiştirirgenişlik(en boy oranını saygı), üst/alt için bir yüzde değeri kullanabiliriz padding emlak.

percentage value üst/alt kenar boşlukları doldurma ya da bir taşıyıcı blok genişliğine göredir.

Örneğin:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

İşteOnline Demo. Aşağıdan yorum satırları ve panel etkisini görmek için yeniden boyutlandırma.

Ayrıca, bir padding özelliği uygulamak edebilirizkuklaçocuk ya 28*/:after *-eleman sözde aynı sonucu elde etmek için. Amanotbu durumda olan, padding yüzde değeri görecelidirgenişlik.responsive-container kendisi.

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo #1.
Demo #2(:after sözde öğesini kullanarak)

İçerik Ekleme

padding-top özelliğini kullanarak 58 ** içindekiler, üst veya alt kısmındakap.

Tamir etmek için, biz wrap içeriği, bir kapsayıcı öğe, kaldırın bu ortamdan belge normal akışını kullanarak absolute positioning ve son olarak genişletmek sarıcı (bu kullanarak top, right, bottom ve left özellikler) doldurmak için tüm alanı üst,kap.

İşte başlıyoruz:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

İşteOnline Demo.

Hepsini bir araya getirmek

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

İşteWORKING DEMO.

Belli ki, ::before sözde elemanı için kullanmaktan kaçınıntarayıcı uyumlulukve .img-container ilk çocuk gibi bir öğe oluşturun:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

UPDATED DEMO.

max-* özelliklerini kullanarak

Görüntü içinde alt genişlik kutuyu tutmak için, görüntü üzerinde max-height max-width özelliği ayarlayabilirsiniz:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

İşteUPDATED DEMO.