html - 将图像放入也有标题的 div 中？

Question

这是我的 fiddle

这是我的 HTML:

<div class="block">
    <h2>Title</h2>
    <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" />
</div>

我正在尝试在我的 block 中放置一个图像。我想调整图像的大小，使其完全适合 block 内。我试过将高度设置为 100%，但未考虑 block 的标题，高度溢出了 block 。

Answer 1

试试 display:table

.block{
    display: table;
}

.block{
    width: 30%;
    height: 100px;
    display: table;
    background: pink;
    
}

img{
   height: 100%;
   max-width: 100%;
}

<div class="block">
    <h2>Title</h2>
    <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" />
</div>