Saya memiliki kode berikut yang menyiapkan wadah yang memiliki tinggi yang berubah dengan lebar saat browser diubah ukurannya (untuk mempertahankan rasio aspek persegi).

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

Bagaimana cara menyelaraskan IMG di dalam container secara vertikal? Semua gambar saya memiliki tinggi variabel dan penampung tidak boleh memiliki tinggi / tinggi garis tetap karena responsif ... Tolong bantu!

Berikut adalah teknik untuk menyelaraskan elemen sebaris di dalam induk , secara horizontal dan vertikal pada saat yang bersamaan:

Perataan Vertikal

1) Dalam pendekatan ini, kami membuat elemen inline-block(pseudo-) sebagai anak pertama (atau terakhir) dari induk , dan menyetel heightpropertinya 100%untuk mengambil semua tinggi induknya .

2) Juga, menambahkan vertical-align: middlemembuat elemen inline (-block) di tengah ruang baris. Jadi, kami menambahkan deklarasi CSS itu ke file pertama dan elemen kami ( gambar ) keduanya.

3) Akhirnya, untuk menghilangkan karakter spasi antara elemen inline (-block) , kita dapat mengatur ukuran font induk menjadi nol font-size: 0;.

Catatan: Saya menggunakan teknik penggantian gambar Nicolas Gallagher berikut ini.

Apa manfaatnya?

• Wadah ( induk ) dapat memiliki dimensi dinamis.

• Tidak perlu menentukan dimensi elemen gambar secara eksplisit.

• Kita juga dapat dengan mudah menggunakan pendekatan ini untuk menyelaraskan <div>elemen secara vertikal ; yang mungkin memiliki konten dinamis (tinggi dan / atau lebar). Tetapi perhatikan bahwa Anda harus mengatur ulang font-sizeproperti divuntuk menampilkan teks di dalam. Demo Online .

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

Hasil

Kontainer Responsif

Bagian ini tidak akan menjawab pertanyaan karena OP sudah mengetahui cara membuat container responsif. Namun, saya akan menjelaskan cara kerjanya.

Untuk membuat tinggi elemen penampung berubah dengan lebarnya (sesuai dengan rasio aspek), kita bisa menggunakan nilai persentase untuk paddingproperti atas / bawah .

Nilai persentase pada bantalan atas / bawah atau margin relatif terhadap lebar blok penampung.

Contohnya:

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

Ini Demo Online . Komentari garis dari bawah dan ubah ukuran panel untuk melihat efeknya.

Juga, kita bisa menerapkan paddingproperti ke dummy child atau :before/ :afterpseudo-element untuk mendapatkan hasil yang sama. Tapi catatan bahwa dalam kasus ini, nilai persentase pada paddingrelatif terhadap lebar dari .responsive-containeritu sendiri.

<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 (Menggunakan :afterpseudo-element)

Menambahkan konten

Menggunakan padding-topproperti menyebabkan ruang yang sangat besar di bagian atas atau bawah konten, di dalam penampung .

Untuk memperbaikinya, kami telah membungkus konten dengan elemen pembungkus, menghapus elemen itu dari aliran normal dokumen dengan menggunakan pemosisian absolut , dan akhirnya memperluas pembungkus (bu menggunakan top, right, bottomdan leftproperti) untuk mengisi seluruh ruang dari induknya, itu kontainer .

Kita mulai:

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

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

Ini dia Demo Online .

Kumpul semua

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

Berikut adalah DEMO KERJA .

Jelas, Anda dapat menghindari penggunaan ::beforepseudo-element untuk kompatibilitas browser , dan membuat elemen sebagai anak pertama dari .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%;
}

DEMO DIPERBARUI .

Menggunakan max-*properti

Untuk menjaga gambar di dalam kotak dengan lebar yang lebih rendah, Anda dapat mengatur max-heightdan max-widthproperti pada gambar:

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

Berikut adalah DEMO YANG DIPERBARUI .

Dengan flexbox, ini mudah:

BIOLA

Cukup tambahkan yang berikut ini ke penampung gambar:

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

Gunakan css ini, karena Anda sudah memiliki markup untuk itu:

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

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

Berikut adalah JsBin yang berfungsi: http://jsbin.com/ihilUnI/1/edit

Solusi ini hanya berfungsi untuk gambar persegi (karena nilai persentase margin atas bergantung pada lebar wadah, bukan tingginya). Untuk gambar berukuran acak, Anda dapat melakukan hal berikut:

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

Solusi kerja JsBin: http://jsbin.com/ihilUnI/2/edit

Anda dapat memusatkan gambar, baik secara horizontal maupun vertikal, menggunakan margin: autodan pemosisian absolut. Juga:

1. Dimungkinkan untuk membuang markup ekstra dengan menggunakan elemen semu.
2. Anda dapat menampilkan bagian tengah gambar BESAR dengan menggunakan nilai negatif kiri, atas, kanan, dan bawah.

.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>

Coba yang ini

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

Berikut adalah teknik yang memungkinkan Anda untuk memusatkan konten APA PUN baik secara vertikal maupun horizontal!

Pada dasarnya, Anda hanya membutuhkan dua kontainer dan memastikan elemen Anda memenuhi kriteria berikut.

Kontainer luar:

• harus punya display: table;

Wadah bagian dalam:

• harus punya display: table-cell;
• harus punya vertical-align: middle;
• harus punya text-align: center;

Kotak konten:

• harus punya display: inline-block;

Jika Anda menggunakan teknik ini, cukup tambahkan gambar Anda (bersama dengan konten lain yang Anda inginkan) ke kotak konten.

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>

Lihat juga Biola ini !

Saya menemukan utas ini untuk mencari solusi yang:

• menggunakan 100% lebar gambar yang diberikan
• menjaga rasio aspek gambar
• menjaga gambar tetap sejajar secara vertikal ke tengah
• berfungsi di browser yang tidak sepenuhnya mendukung flex

Menguji beberapa solusi yang diposting di atas, saya tidak menemukan satu pun untuk memenuhi semua kriteria ini, jadi saya mengumpulkan yang sederhana ini yang mungkin berguna bagi orang lain yang perlu melakukan hal yang sama:

.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>

Contoh kerja di JSFiddle

Mencoba

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

kode html

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

kode css

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

Buat div lain dan tambahkan 'dummy' dan 'img-container' di dalam div

Lakukan HTML dan CSS seperti berikut

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>

Alih-alih 100% untuk 'responsive-container' Anda dapat memberikan tinggi yang Anda inginkan.,