Tarayıcı yeniden boyutlandırıldığında (kare en boy oranını korumak için) genişliği ile değişen bir yüksekliğe sahip bir kapsayıcı kurar 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;
}

IMG'yi kabın içinde dikey olarak nasıl hizalayabilirim? Tüm resimlerim değişken yüksekliğe sahip ve kap sabit bir yükseklik / çizgi yüksekliğine sahip olamaz çünkü duyarlı ... Lütfen yardım edin!

İşte bir üst öğedeki satır içi öğelerin aynı anda yatay ve dikey olarak hizalanması için bir teknik :

Dikey hizalama

1) Bu yaklaşımda, ebeveynininline-block ilk (veya son) alt öğesi olarak (sözde-) bir öğe oluştururuz ve özelliğini , ebeveyninin tüm yüksekliğini alacak şekilde ayarlarız .height100%

2) Ayrıca ekleme vertical-align: middle, satır içi (-blok) öğelerini satır alanının ortasında tutar. Bu nedenle, bu CSS bildirimini ilk çocuğa ve elemanımıza ( resim ) ekliyoruz .

3) Son olarak, satır içi (-block) öğeler arasındaki beyaz boşluk karakterini kaldırmak için , üst öğenin yazı tipi boyutunu sıfıra ayarlayabiliriz font-size: 0;.

Not: Nicolas Gallagher'ın görüntü değiştirme tekniğini aşağıda kullandım.

Avantajları nelerdir?

• Kap ( üst öğe ) dinamik boyutlara sahip olabilir.

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

• Bu yaklaşımı, bir <div>öğeyi dikey olarak da hizalamak için kolayca kullanabiliriz ; dinamik bir içeriğe sahip olabilir (yükseklik ve / veya genişlik). Ancak , içindeki metni görüntülemek için öğesinin font-sizeözelliğini yeniden ayarlamanız gerektiğini unutmayın div. Çevrimiçi 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ı Kapsayıcı

OP yanıt veren bir kapsayıcıyı nasıl oluşturacağınızı zaten bildiği için bu bölüm soruyu cevaplamayacaktır. Ancak, nasıl çalıştığını açıklayacağım.

Yapmak için yüksekliği onun bir muhafaza elemanı değişiklikleri genişliği (boy oranı açısından), en üst / alt için bir yüzde değeri kullanabilir paddingözelliği.

Bir yüzde değeri üst / alt dolgu ya da kenarlarında içeren blok genişliğine bağlıdır.

Ö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   */
}

İşte Online Demo . Alttan satırları yorumlayın ve efekti görmek için paneli yeniden boyutlandırın.

Ayrıca, aynı sonucu elde etmek için paddingmülkü kukla bir çocuğa veya :before/ :aftersözde unsura uygulayabiliriz. Ancak Not bu durumda, ilgili yüzde değeri paddinggöre olan genişliği arasında .responsive-containertek başına.

<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 ( :afterSözde öğe kullanma )

İçerik ekleme

padding-topÖzellik kullanmak , içeriğin üstünde veya altında, kabın içinde büyük bir alana neden olur .

Düzeltmek amacıyla, bir sarma elemanı ile içerik sarma kullanarak belge, normal akışından bu öğe kaldırmak sahip mutlak konumlandırma (bu kullanılarak sarıcı genişletmek ve son olarak top, right, bottomve leftözellikleri) kendi ana tüm alanını doldurmak için, kap .

İşte başlıyoruz:

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

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

İşte Online 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;
}

İşte ÇALIŞMA DEMOSU .

Açıkçası, tarayıcı uyumluluğu::before için sözde öğe kullanmaktan kaçınabilir ve aşağıdakilerin ilk alt öğesi olarak bir öğe oluşturabilirsiniz :.img-container

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

GÜNCEL DEMO .

max-*Özellikleri kullanma

Görüntüyü kutunun içinde daha düşük genişlikte tutmak için, görüntüyü ayarlayabilir max-heightve max-widthözelliğini 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 */
}

İşte GÜNCEL DEMO .

Flexbox ile bu kolaydır:

VAKTİNİ BOŞA HARCAMAK

Görüntü kabına aşağıdakileri eklemeniz yeterlidir:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Zaten biçimlendirmeniz olduğundan bu css'yi kullanın:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

İşte çalışan bir JsBin: http://jsbin.com/ihilUnI/1/edit

Bu çözüm yalnızca kare görüntüler için çalışır (çünkü kenar boşluğu yüzdesi değeri, yüksekliğe değil kabın genişliğine bağlıdır). Rastgele boyutlu görüntüler için aşağıdakileri yapabilirsiniz:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Çalışan JsBin çözümü: http://jsbin.com/ihilUnI/2/edit

margin: autoMutlak konumlandırmayı kullanarak görüntüyü hem yatay hem de dikey olarak ortalayabilirsiniz . Ayrıca:

1. Sahte elemanlar kullanarak fazladan işaretleme yapmak mümkündür.
2. Negatif sol, üst, sağ ve alt değerleri kullanarak BÜYÜK görüntülerin orta kısmını görüntülemek mümkündür.

.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}

<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>

Bunu dene

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

HERHANGİ BİR içeriği hem dikey hem de yatay olarak ortalamanızı sağlayan bir teknik!

Temel olarak, sadece iki kaba ihtiyacınız vardır ve elemanlarınızın aşağıdaki kriterleri karşıladığından emin olun.

Dış konteyner:

• sahip olmalı display: table;

İç konteyner:

• sahip olmalı display: table-cell;
• sahip olmalı vertical-align: middle;
• sahip olmalı text-align: center;

İçerik kutusu:

• sahip olmalı display: inline-block;

Bu tekniği kullanırsanız, görüntünüzü (onunla gitmek istediğiniz diğer içeriklerle birlikte) içerik kutusuna eklemeniz yeterlidir.

Demo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

Ayrıca bkz bu Fiddle !

Bir çözüm arayışında bu iş parçacığına rastladım:

• verilen resmin genişliğinin% 100'ünü kullanır
• görüntü en boy oranını korur
• görüntüyü dikey olarak ortaya hizalar
• flex'i tam olarak desteklemeyen tarayıcılarda çalışır

Yukarıda yayınlanan çözümlerden bazılarını test etmek, tüm bu kriterleri karşılayacak birini bulamadım, bu yüzden aynı şeyi yapmak zorunda olan diğer insanlar için yararlı olabilecek bu basit çözümü bir araya getirdim:

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it's horizontally center) */
  width: 100%;
}

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

JSFiddle'da çalışma örneği

Deneyin

Html

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

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

HTML Kodu

<div class="image-container"> <img src=""/> </div>

css kodu

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

Başka bir div yapın ve div içine hem 'kukla' hem de 'img-container'ı ekleyin

HTML ve CSS'yi aşağıdaki gibi yapın

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}

<div class="responsive-container">
    <div class="inner-container">
		<div class="dummy">Sample</div>
		<div class="img-container">
			Image tag
		</div>
	</div>	
</div>

'Duyarlı kap' için% 100 yerine istediğiniz yüksekliği verebilirsiniz.,