Question

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

我试过这个： `

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

`

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

Answer 1

要修复此问题，您必须将图像

的宽度和高度设置为100％

以下是完整的演示。

希望这对你有所帮助。

＆＃13;

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

＆＃13;

Answer 2

如果您试图避开图片和标题超出父容器，您有几个选项。最好的方法是将图片max-height和max-width设置为100％，然后将图片叠加在底部。如果你想让它们完全分开，你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

这会将图像的最大高度设置为减去标题高度的100％。如果您希望将标题粘贴到容器的底部，即使图像较短，也请将容器放到position: relative并为容器和标题提供标题position: absolute; bottom:0;。

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

2 个答案: