Fit an image inside a div that also has a title?

Question

Here's my fiddle

Here's my HTML:

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

I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken in to consideration and the height overflows the block.

Answer 1

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

Answer 2

One possibility that gives just one constant-pixel value (repeated once):

.block h2 {
  height: 30px;
}

.block img {
  height: calc(100% - 30px);
}

Answer 3

margin-top:-18px

您也可以尝试仅移动图像检查小提琴

Answer 4

What are you trying to do?

If you want do image background - use background-image and fit it

Anyway you can do something like this:

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

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

h2{
    position: absolute;
    top: 10px;
    left: 100px;
}

https://jsfiddle.net/fe11zyh9/1/

Answer 5

Is it a possibility to set the height of the IMG in px?

So:

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