Question

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

现在我想在图像的正下方添加一个标题，该标题根据字体大小占用空间，图像拉伸到容器空间剩下的内容。我无法做到。

我之前的解决方案（我只在高度上留下了约束） - 现在，不工作：

<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>

重要提示：我没有工作解决方案，任何解决方案，但我尝试解决此问题，除了容器外没有任何固定值。原因是，当调整大小时，我已经设置了容器的尺寸，并相应地设置了内容比例。

大容器，图像占据几乎整个高度，它不能适应宽度100％，因为高度太大（奇怪的外观可能是我的Gimp技能的结果）：

Container is bigger

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

Image is smaller

文字可能看起来像放大（通过比较），但它的大小是相同的 - 只有图像被挤压，容器更小。

Answer 1

如果我找到了你，你想要为字幕设置一个特定的字体大小，图像将自己重新调整大小到字幕的相同宽度，保持它的宽高比。

在这种情况下，我建议您使用表格，其中包含两个TR和一个TD。将图像放在第一行（TR），将标题放在第二行。不要定义TABLE，TD或TD的宽度。因此，无论您为第二行中的标题提供哪种字体大小，该列都会将其宽度设置为该大小，而宽度为100％的图像将根据TD大小自行设置。

例如，

＆＃13;

<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>

＆＃13;

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

有关使用flexbox的背景信息：

Answer 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>

我们应该设定。

带有标题的图像 - 如何拉伸和居中？

3 个答案: