将图像和相应的跨度拟合到父 div答案

【问题标题】：Fitting an image and corresponding span to parent div将图像和相应的跨度拟合到父 div
【发布时间】：2015-04-28 13:02:53
【问题描述】：

我有一个固定宽度和高度的 div。我想为其添加图像和标题（使用 img 和 figurecaption），这样它们都不会超过父级的尺寸。

我试过这个： `

parent-> 
height: 100px;
width: 100px;
margin: 0;
img->
display: block;
height: 100%;
width: 100%;
figurecaption->
text-align: center

当图像的尺寸大于指定的高度和宽度时，标题会出现在外面。如何处理这个。谢谢。

【问题讨论】：

这就是你想要的吗？ example
@zouzou0 ：是的，谢谢

标签： html css

【解决方案1】：

如果您试图避免图像和标题超出父容器，您有多种选择。最好的可能是将图像max-height 和max-width 设置为100%，然后将标题覆盖在底部。如果你想让它们完全分开，你可以这样做：

#container {
  height: 400px;
  width: 300px;
  border: 1px solid #000000;
  text-align:center;
}
#image {
  max-height: calc(100% - 50px);
  max-width: 100%;
}
#caption {
  background: #282828;
  max-height: 50px;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

<div id="container">
  <img id="image" src="http://www.fixedstars.com.au/images/runBack.jpg">
  <div id="caption">This is the caption</div>
</div>

这会将图像的最大高度设置为小于标题高度的 100%。如果您希望将标题粘贴到容器底部，即使图像更短，也可以将容器设置为 position: relative，并为容器和标题提供标题 position: absolute; bottom:0;。

【讨论】：

【解决方案2】：

要解决此问题，您必须将图像的宽度和高度设置为 100%

下面是完整的演示。

希望这对你有帮助。

<style>
.mydiv {
    border-color: red;
    border-style: solid;
    height: 50px;
    width: 80px;
}


.imgStyle {
    height: 100%;
    width: 100%;
}
</style>

<html>
<div class="mydiv">
<img src="http://www.boltoday.com/wp-content/uploads/2014/10/only-3d-natural-1024x768.jpg" class="imgStyle" />
Your Text Goes Here
</div>

</html>

【讨论】：