HTML – 如何将图像拉伸到特定段落？

这是我试图实现的原型

这就是我现在所拥有的.

我从上一个问题中学到了Side to Side如何将选项列与图片对齐 – 使用display inline block attribute- Display.

现在我正在尝试对齐图片,这样图片就不会像原型一样超越娱乐选项.这是JSFiddle

看到div这样的块元素“占据了其父元素的整个空间” – Block Element,Css Height属性对我来说最有意义.

这是我在图像和包含图像的div中设置高度的代码

div

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

图片

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

3％只是一个硬编码的测试值,但在这两种情况下,图像的高度都没有变化.我在这看到了另一个线程 – Height Thread但是那个人说要调整高度.

有没有人知道在这种情况下缩放图像的高度？

解决方法

我是如何解决这个问题的,我意识到,根据定义,div是一个“将自然扩展以适应其子元素”的 block element.

所以,我开始使用css宽度和高度attributes,并找到一个高度,使图像与娱乐组件对齐.

如果有人好奇,这里是我的最终img html标签代码(高度为240像素)

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