Tôi có đoạn mã sau đây sẽ thiết lập một thùng chứa có chiều cao thay đổi theo chiều rộng khi trình duyệt được định kích thước lại (để duy trì tỷ lệ khung hình vuông).

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

Làm thế nào tôi có thể sắp xếp theo chiều dọc của IMG bên trong container? Tất cả hình ảnh của tôi đều có chiều cao thay đổi và container không thể có chiều cao / chiều cao cố định vì nó phản hồi ... Xin hãy giúp đỡ!

Đây là một kỹ thuật để sắp xếp các thành phần nội tuyến bên trong cha mẹ , theo chiều ngang và chiều dọc cùng một lúc:

Căn dọc

1) Trong phương pháp này, chúng ta tạo ra một inline-blockphần tử (pseudo-) là đứa con đầu lòng (hoặc cuối cùng) của cha mẹ , và thiết lập của nó heighttài sản để 100%thực hiện tất cả chiều cao của nó mẹ .

2) Ngoài ra, việc thêm vertical-align: middlegiữ các phần tử nội tuyến (-block) ở giữa không gian dòng. Vì vậy, chúng tôi thêm khai báo CSS đó vào phần tử con đầu tiên và phần tử của chúng tôi ( hình ảnh ).

3) Cuối cùng, để xóa ký tự khoảng trắng giữa các phần tử nội tuyến (-block) , chúng ta có thể đặt kích thước phông chữ của cha mẹ bằng 0 font-size: 0;.

Lưu ý: Tôi đã sử dụng kỹ thuật thay thế hình ảnh của Nicolas Gallagher sau đây.

Những lợi ích là gì?

• Container ( cha mẹ ) có thể có kích thước động.

• Không cần xác định rõ kích thước của thành phần hình ảnh.

• Chúng ta có thể dễ dàng sử dụng phương pháp này để sắp xếp một <div>yếu tố theo chiều dọc ; có thể có nội dung động (chiều cao và / hoặc chiều rộng). Nhưng lưu ý rằng bạn phải đặt lại thuộc font-sizetính của divđể hiển thị văn bản bên trong. Demo trực tuyến .

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

Đầu ra

Container đáp ứng

Phần này sẽ không trả lời câu hỏi vì OP đã biết cách tạo một thùng chứa đáp ứng. Tuy nhiên, tôi sẽ giải thích cách nó hoạt động.

Để làm cho chiều cao của phần tử container thay đổi theo chiều rộng của nó (tôn trọng tỷ lệ khung hình), chúng ta có thể sử dụng giá trị phần trăm cho thuộc tính trên / dưới padding.

Một giá trị phần trăm trên đệm / dưới hoặc lợi nhuận là tương đối so với chiều rộng của khối chứa.

Ví dụ:

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

Đây là bản Demo trực tuyến . Nhận xét các dòng từ dưới cùng và thay đổi kích thước bảng để xem hiệu ứng.

Ngoài ra, chúng tôi có thể áp dụng paddingtài sản cho một đứa trẻ giả hoặc :before/ :afterphần tử giả để đạt được kết quả tương tự. Nhưng lưu ý rằng trong trường hợp này, giá trị phần trăm trên paddingtương đối với chiều rộng của .responsive-containerchính nó.

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

Bản thử nghiệm số 1 .
Bản trình diễn số 2 (Sử dụng :afterphần tử giả)

Thêm nội dung

Sử dụng padding-toptài sản gây ra một không gian lớn ở trên cùng hoặc dưới cùng của nội dung, bên trong container .

Để khắc phục điều đó, chúng tôi có quấn nội dung bởi một yếu tố wrapper, loại bỏ yếu tố đó từ dòng chảy bình thường tài liệu bằng cách sử dụng định vị tuyệt đối , và cuối cùng là mở rộng wrapper (bu sử dụng top, right, bottomvà lefttài sản) để lấp đầy toàn bộ không gian của mẹ, các container .

Ở đây chúng tôi đi:

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

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

Đây là bản Demo trực tuyến .

Kết hợp tất cả lại với nhau

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

Đây là DEMO LÀM VIỆC .

Rõ ràng, bạn có thể tránh sử dụng ::beforephần tử giả để tương thích trình duyệt và tạo một phần tử là con đầu tiên của .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%;
}

CẬP NHẬT DEMO .

Sử dụng max-*tài sản

Để giữ hình ảnh bên trong hộp ở chiều rộng thấp hơn, bạn có thể đặt max-heightvà thuộc max-widthtính trên hình ảnh:

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

Dưới đây là DEMO CẬP NHẬT .

Với flexbox, điều này thật dễ dàng:

VĨ CẦM

Chỉ cần thêm các mục sau vào thùng chứa hình ảnh:

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

Sử dụng css này, vì bạn đã có đánh dấu cho nó:

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

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

Đây là một JsBin đang hoạt động: http://jsbin.com/ihilUnI/1/edit

Giải pháp này chỉ hoạt động đối với hình ảnh vuông (vì giá trị phần trăm lề trên phụ thuộc vào chiều rộng của vùng chứa, không phải chiều cao). Đối với hình ảnh kích thước ngẫu nhiên, bạn có thể làm như sau:

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

Giải pháp JsBin hoạt động: http://jsbin.com/ihilUnI/2/edit

Bạn có thể căn giữa một hình ảnh, cả theo chiều ngang và chiều dọc, sử dụng margin: autovà định vị tuyệt đối. Cũng thế:

1. Có thể bỏ đánh dấu thêm bằng cách sử dụng các yếu tố giả.
2. Có thể hiển thị phần giữa của hình ảnh LỚN bằng cách sử dụng các giá trị âm trái, trên, phải và dưới cùng.

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

Hãy thử cái này

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

Đây là một kỹ thuật cho phép bạn tập trung mọi nội dung theo cả chiều dọc và chiều ngang!

Về cơ bản, bạn chỉ cần một hai container và đảm bảo các yếu tố của bạn đáp ứng các tiêu chí sau.

Các container bên ngoài:

• nên có display: table;

Các thùng chứa bên trong:

• nên có display: table-cell;
• nên có vertical-align: middle;
• nên có text-align: center;

Hộp nội dung:

• nên có display: inline-block;

Nếu bạn sử dụng kỹ thuật này, chỉ cần thêm hình ảnh của bạn (cùng với bất kỳ nội dung nào bạn muốn đi cùng với nó) vào hộp nội dung.

Bản giới thiệu :

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>

Xem thêm Fiddle này !

Tôi đã xem qua chủ đề này để tìm kiếm một giải pháp rằng:

• sử dụng 100% chiều rộng của hình ảnh đã cho
• giữ tỷ lệ hình ảnh
• giữ hình ảnh thẳng hàng ở giữa
• hoạt động trong các trình duyệt không hỗ trợ đầy đủ flex

Thử nghiệm một số giải pháp được đăng ở trên Tôi không tìm thấy một giải pháp nào đáp ứng tất cả các tiêu chí này, vì vậy tôi kết hợp một giải pháp đơn giản này có thể hữu ích cho những người khác cần phải làm như vậy:

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

Ví dụ hoạt động trên JSFiddle

Thử

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

Mã HTML

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

mã css

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

Tạo một div khác và thêm cả 'hình nộm' và 'img-container' bên trong div

Làm HTML và CSS như sau

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>

Thay vì 100% cho 'thùng chứa đáp ứng', bạn có thể đưa ra chiều cao mà bạn muốn.,