带标题的图像——如何拉伸和居中？答案

【问题标题】：Image with caption -- how to strech and center it?带标题的图像——如何拉伸和居中？
【发布时间】：2015-02-19 16:22:07
【问题描述】：

当我只有一个图像时，我有一个很好的工作解决方案——我可以将图像居中（在两个轴上）并以这样的方式拉伸它，它不大于容器也不小于容器（它保留了比例)。

现在我想以这种方式直接在图像下方添加一个标题，该标题会根据字体大小占用空间，并且图像会拉伸到容器空间的剩余部分。而我做不到。

我之前的解决方案（我只对高度进行了限制）——现在，不起作用：

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " >
    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
    <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img>
    <br/><span style="">TEST</span>
</div>

其他尝试，但效果更差，图像没有以任何方式拉伸。 table 与 table-cell

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " >
    <div style="display:table;width:100%;height:100%;max-height:100%;">
        <div style="vertical-align:middle;display:table-cell;max-height:100%;">
            <img style="display:inline;max-height:100%;" src="icons/speaking.png" ></img>
        </div>
    </div>
</div>

或者figure——真的没有区别：

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " >
    <div style="display:table;width:100%;height:100%;max-height:100%;">
        <figure style="vertical-align:middle;display:table-cell;max-height:100%;">
            <img style="max-height:100%" src="icons/speaking.png" ></img>
            <figcaption style="">TEST</figcaption>
        </figure>
    </div>
</div>

重要提示：我没有可行的解决方案，任何解决方案，但我尝试在没有任何固定值的情况下解决这个问题，容器除外。这样做的原因是，当resize发生时，我已经设置了容器的尺寸，以及相应的内容缩放。

大容器，图片几乎占据了整个高度，宽度不能100%，因为高度太大（奇怪的样子可能是我的Gimp技能造成的）：

小容器，图像被挤压。仍有保留文本的空间。

文本可能看起来像放大了（相比之下），但它的大小是一样的——只是图像被压缩了，容器更小了。

【问题讨论】：

在标题上设置position:absolute怎么样？
@Danield，没问题，但它是如何解决问题的？

标签： html css image center

【解决方案1】：

如果你想支持的浏览器允许你使用 flexbox，我认为你可以通过以下方式实现它。我没有为图像使用<img> 标签，而是选择使用background-image 以及background-position: center center 和background-size: contain 来居中和拉伸图像。看看您是否可以使用 <img> 标记来实现这一点可能是值得的。

我在容器 .media 类上添加了 display: flex 和 flex-direction: column。如果在.media__image 类上添加flex-grow: 1，这将使图像容器不断增长，直到用完整个高度。

.media {  
  display: flex;
  flex-direction: column;
  
  width: 200px;
  height: 200px;
}

.media__image {
  flex-grow: 1;
  
  background: url('http://placehold.it/150x100') center center no-repeat;
  background-size: contain;
  background-color: #f99;
}
.media__caption {
  background-color: #9f9;  
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0.5em;
  color: #333;
}

<div class="media">
  <div class="media__image"></div>
  <div class="media__caption">
    Caption
  </div>
</div>

请参阅此 Codepen，了解使用不同大小的容器、图像和字体的三个示例。

有关使用 flexbox 的背景信息：

【讨论】：

非常感谢。我正在阅读并试图理解您发布的所有内容，并解决了一个遗留问题 - 当您将容器设置为大高度（假设是图像高度的两倍）时，标题位于底部容器，不在图像下方（正下方）。
我担心这可能会有点困难。目前flex-grow: 1 使.media__image 在添加标题后获取.media 容器中剩余的内容。如果高度受限，我很难让常规的<img> 标签在垂直方向上拉伸/收缩。我想如果我弄清楚了，我可以在不使用 flexbox 的情况下让它工作。我是否正确假设它应该拉伸小图像并缩小大图像以适应宽度和高度受限的容器？
是的，确实如此。但是保持比例，所以直接将img 添加到flexbox 中的天真方法不起作用（我已经检查过）。这就是你已经取得的成就:-)
我在玩<img> 标签（参见codepen.io/ckuijjer/pen/KwMYpX），但它不会拉伸图像（只会缩小），而且.image 容器和img。我担心它无法完成，因为您希望图像的高度受到标题高度的限制，同时图像高度会影响标题的高度。
谢谢。如果你这么说，我接受你的回答，因为它非常有用，非常接近我的要求。也许我会找到答案 :-) 非常非常感谢。

【解决方案2】：

如果我没听错的话，您想为标题设置特定的字体大小，然后图像将自身重新调整为与标题相同的宽度，并保持其纵横比。

在这种情况下，我建议您使用具有两个 TR 和一个 TD 的表。将图像放在第一行 (TR) 中，将标题放在第二行中。不要定义 TABLE、TD 或 TD 的宽度。因此，无论您为第二行中的标题提供什么字体大小，该列都会将其宽度设置为该大小，并且具有 100% 宽度的图像将根据 TD 大小自行设置。

例如，

<Table>
<TR>
   <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img>
   <TD></TD>
</TR>
<TR>
   <TD>
      <br/><span style="">TEST</span>
   </TD>
</TR>
<Table>

【讨论】：

谢谢。它现在不起作用（内容没有以任何方式居中，图像也没有被拉伸），但我也会探索这种方法。

【解决方案3】：

我真的很困惑..

仅通过添加一个简单的 html 标记，我就实现了我认为您在谈论的问题，但您的问题却非常不清楚。

<html>
<head>
<style>
span {
font-size: 100px;
}
</style>
</head>
<body>
<center><img src="http://i.imgur.com/S2E4MDu.png"/>
<br/><span style="">TEST</span></center>
</div>
</body>
</html>

这对我来说是内容和跨度的中心，所以剩下要做的就是在 css 中添加一个样式，以将其声明为您正在寻找的大小..

编辑：我发现您在容器内也遇到了问题，所以我也继续测试了它。

.container {
position: relative;
width: 100%;
border: 1px solid red;
}
.container img {
width: 500px;
height: 500px;
}

只需将容器包裹在图像周围

<div class="container">
<center><img src="http://i.imgur.com/S2E4MDu.png"/>
<br/><span style="">TEST</span></center>
</div>

我们应该做好准备。

【讨论】：

谢谢，但它是另一种方式 - 为容器设置大小，并且图像必须拉伸，而在您的方法中，您设置图像的大小并且容器被拉伸。查看更新后的问题。