How to make image stretch to a specific paragraph?

Question

Here is the prototype I am trying to implement Here is what I have right now.

Answer 1

How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".

So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.

If anyones curious, here is my final img html tag code(height of 240 pixels)

<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" /> 

Answer 2

Taking a shot in the dark without looking at all the code. How are you creating your image, in an <img src=""/> tag or as the background of a div via the css attribute background:url("image.png");? The height and width percentages reference the dimensions of that elements parent element. I'm going to assume that your image has no parent element/container, or that the parent/element container is not set to specified height. Therefore your element is referencing the Viewport who's height attribute is automatically set to auto. Set your HTML and Body elements height attribute to 100%.

html,body{
   height:100%;
}