html - 如何使图像拉伸(stretch)到特定段落？

Question

这是我要实现的原型(prototype) 这是我现在所拥有的。

我从我之前的问题中学到了 Side to Side如何将选项列与图片对齐 - 使用显示内联 block 属性 - Display .

现在我正在尝试对齐图片，这样图片就不会像原型(prototype)中那样超出娱乐选项。这是 JSFiddle

看到像 div 这样的 block 元素“占据了其父元素的整个空间”- Block Element , CSS Height属性对我来说在这里使用最有意义。

这是我在图像和包含图像的 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" />