css - 如何使用CSS定位不同大小的图像？

Question

我有两张宽度和高度不同的图片，需要将它们放在图片框的底部居中位置。这是 HTML 和 CSS 示例。

<div class="box">
     <div class='image'>
        <img alt="" src="image.jpg"/>
     </div>
</div>

.box {
  max-width: 970px;
  height: 440px;
}
.box img {
  max-width: 100%;
  position: absolute;
  bottom: 8px;
  margin-left: auto;
  margin-right: auto;
}

此代码适用于精确宽度和高度的大图像。但是，当将较小的图像放置在图像框中时，该图像位于右下角的中央。如何使两个图像都居中底部？

感谢大家的帮助!

Answer 1

给你...我会尽量解释，但简短的回答，a fiddle

.box {
  /* Just so I could see the parent */
  background-color: #bada55;
  max-width: 970px;
  height: 440px;
  /* Needed to make this element positional (so it will contain the absolutely positioned child */
  position: relative;
  /* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
  position: absolute;
  bottom: 8px;
  /* Force full width */
  left: 0;
  right: 0;
  /* Center contents (the image) */
  text-align: center;
}
img {
  max-width: 100%;
}