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

Question

这是我试图实现的原型 这就是我现在所拥有的。

我从上一个问题中了解到Side to Side如何将选项列与图片对齐 - 使用显示内联块属性 - 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但是那个人也说要调整高度。

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

Answer 1

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

因此，我开始使用css宽度和高度attributes并找到一个高度，使图像与娱乐组件对齐。

如果有人好奇，这是我的最终img html标签代码（高度为240像素）

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

Answer 2

在没有查看所有代码的情况下在黑暗中拍摄。如何通过css属性<img src=""/>在background:url("image.png");标记中或作为div的背景创建图像？高度和宽度百分比引用该元素父元素的尺寸。我将假设您的图像没有父元素/容器，或者父/元素容器未设置为指定的高度。因此，您的元素引用了视口，其高度属性自动设置为自动。将HTML和Body元素高度属性设置为100％。

html,body{
   height:100%;
}