How to make image stretch to a specific paragraph?

问题

Here is the prototype I am trying to implement

Here is what I have right now.

I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.

Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle

Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.

Here is my code for setting height in both the image and the div containing the image

The div

 .sidebar {
    display:inline-block;
    vertical-align:top;
    width:70%;
        height:3%;
    }

The image

#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}

The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.

Does anyone know to scale the height of the image in this situation?

回答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" />

回答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%;
}

来源：https://stackoverflow.com/questions/30106602/how-to-make-image-stretch-to-a-specific-paragraph

标签

html

css

image

user-interface

height