如何在响应式容器内垂直对齐图像？

在响应式容器内垂直对齐图像

挑战

您有一个 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 */
}