使用 CSS 在 div 内对齐图像答案

【问题标题】：Image alignment within div using CSS使用 CSS 在 div 内对齐图像
【发布时间】：2015-03-09 06:09:21
【问题描述】：

我有以下问题。

我有一排 290px x 160px 的正方形，假设显示带有 div 的图像。

<div class="33percentWidth">
<img src="./img1" class="???" />
</div>

<div class="33percentWidth">
<img src="./img2" class="???" />
</div>

<div class="33percentWidth">
<img src="./img3" class="???" />
</div>

问题是如果图像更大（超过 290 像素 x 190 像素；这会扩大高度或宽度。

问题：如何定义我的 img 类，以便图像居中（并缩放）以适合 290x190 的正方形，并且对我来说确定“列”会持续存在？

【问题讨论】：

max-width 和 max-height 应该可以工作..
你最后的陈述不是很清楚：“我确定 with of a "column" 会持续存在吗？”
基本上可以说我为 diff 中显示的每个屏幕截图都有一个临时占位符 - 它的大小正好是 290px x 160px。所以以这种方式显示的图像是很好的“网格”。所以看起来一致。但是，如果我确实使用另一个图像（更大），行/列的大小可能会改变。如果我使用 max-width, max-height 内的图像被拉伸到 290x160。
请包含您目前为33percentwidth提供的CSS

标签： css image alignment

【解决方案1】：

你可以使用 CSS

.classname{
  max-width :290px;
  max-height:190px;
  align-content: center;
}

【讨论】：

没有浮动：中心

【解决方案2】：

如果你给 img 标签指定宽度，那么它会自动适应你的列。

<style>
 .imgclass{
 height:160px;
 width:290px; 
 }
 .divclass{
  text-align:center; 
 }
 </style>
 <div class="divclass">
  <img src="./img1" class="imgclass" />
 </div>

【讨论】：

【解决方案3】：

我认为最好让图像在 div 中按自己的纵横比排序..

所以对于尺码我会：

.class { max-width: 100%; height: auto}

要使图像居中，您可以使用以下任一方法：

.parent { text-align: center}

或者

Img {display: block; margin: 0 auto;}

但最后一个方法唯一有用的是img小于父级

【讨论】：

【解决方案4】：

调整div 和max-width 的大小img

.percentWidth {
  display: inline-block;
  width: 260px;
  height: 190px;
  line-height: 190px;
  border: solid 1px black;
  vertical-align: top;
  text-align: center;
  position: relative;
}
.percentWidth>img {
  max-width: 260px;
  max-height: 190px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="percentWidth">
  <img src="http://placehold.it/260x190&text=same" />
</div>

<div class="percentWidth">
  <img src="http://placehold.it/200x100&text=smaller" />
</div>

<div class="percentWidth">
  <img src="http://placehold.it/280x200&text=bigger" />
</div>

【讨论】：