如何在響應式容器內垂直對齊影像？

在響應式容器內垂直對齊圖像

挑戰

您有一個HTML 結構，其中一個容器保持方形縱橫比作為瀏覽器視窗已調整大小。在此容器內，您想要新增映像，但需要確保它保持垂直對齊。挑戰的出現是因為影像的高度是可變的，容器的高度無法固定。

解

使用CSS 內嵌元素

1. 建立一個內聯塊偽元素作為容器元素的第一個（或容器元素的第一個（或容器元素最後一個）子元素，並將其高度設為100%以佔據整個容器的高度。
2. 為偽元素和影像設定vertical-align: middle，使元素垂直居中。
3. 透過設定 font-size 刪除元素之間的任何空白: 0;在容器元素上刪除字元（空格）所佔用的空間。

HTML:

<div class="container">
    <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.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;        /* <h3 id="製作容器響應式">製作容器響應式</h3><p>要建立高度相對於寬度調整大小的響應式容器，您可以使用百分比值對於頂部/底部填充屬性：</p><pre class="brush:php;toolbar:false">.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   */
}

包裝圖像內容

為了避免容器頂部或底部出現過多空間，請將圖像包裝在包裝元素中並將其定位絕對在容器內以填充其整個空間：

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

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

包括影像和CSS對齊

HTML：

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

  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
  </div>
</div>

用於圖片對齊的CSS：

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

瀏覽器相容性的替代方案

為了更喜歡好地跨瀏覽器相容性，您可以使用div元素作為影像容器的第一個子元素而不是偽元素:

HTML:

<div class="img-container">
    <div class="centerer"></div>
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
</div>

CSS:

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

使用max-* 屬性進行影像控制

保留影像當容器內寬度較小時，可以使用max-height 和max-width屬性圖：

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}