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

Question

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

我从我之前的问题中学到了 How to align the column of options with the picture - using display inline block attribute- Display。

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

看到像 div "occupies the entire space of its parent element" - Block Element, the 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

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

html,body{
   height:100%;
}

Answer 2

我是如何解决这个问题的，我意识到根据定义，div 是 block element 即 "will expand naturally to fit its child elements"。

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

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

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

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

How to make image stretch to a specific paragraph?

html

css

image

user-interface

height