带有标题的图像 - 如何绘制和居中？

当我只有一个图像时，我有一个很好的工作解决方案 - 我可以在两个轴上对一个图像进行中心对齐，并以这种方式对其进行拉伸，使其不会比容器大，也不会更小（它保留了比例）。带有标题的图像 - 如何绘制和居中？

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

我以前的解决方案（我离开了约束只在高度） - 现在，不工作：

<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％，因为高度将过大（奇怪的样子，也许是我瘸子技能的结果）：

Container is bigger

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

Image is smaller

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

来源

2014-12-21 greenoldman

如何设置'位置：absolute'的标题吗？ – Danield

@Danield，没问题，但它如何解决这个问题？ – greenoldman

如果您想要支持的浏览器允许您使用flexbox，我认为您可以通过以下方式实现它。我选择使用background-image以及background-position: center center和background-size: contain来居中和拉伸图像，而不是使用<img>标记作为图像。可能值得看看是否可以使用<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的上：

来源

2014-12-21 10:47:17 ckuijjer

非常感谢。我正在阅读并试图理解您发布的所有好东西，并且还修复了剩下的一个问题 - 当您将容器设置为很大的高度（假设为图像高度的两倍）时，标题将落在容器，不在图像下方（正下方）。 – greenoldman

这可能证明我有点困难。目前，'flex-grow：1'使得'.media__image'在添加标题后获得'.media'容器中剩下的内容。如果高度受到限制，我无法在垂直方向上拉伸/收缩标签''标签。我想如果我能弄清楚，我可以在不使用flexbox的情况下使用它。我是否正确地假设它应该将小图像缩小并缩小大图以适合宽度和高度受限的容器？ – ckuijjer

是的，确实如此。然而，保持比例，如此幼稚的方法，直接添加到幻灯片img'不起作用（我已经检查）。这就是你已经实现的:-) – greenoldman

如果我知道了你的意思，你想为标题设置一个特定的字体大小，并且图像重新调整大小，使其与标题的宽度相同，从而保持标题的宽高比。

在这种情况下，我建议你使用一个表有两个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>

来源

2014-12-21 09:13:26

谢谢。它现在不起作用（内容不以任何方式为中心，并且图像没有延伸），但我也会探索这种方法。 – greenoldman

我真的很迷茫..

只需通过添加一个简单的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>

各地，我们应该设置。

来源

2014-12-21 10:15:41 Placeholder

谢谢，但它是其他方式 - 大小是为容器设置的，图像必须拉伸，而在您的方法中，您设置图像的大小和容器被拉伸。查看更新的问题。 – greenoldman

带有标题的图像 - 如何绘制和居中？

回答

相关问题