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

【问题标题】：How to make image stretch to a specific paragraph?如何使图像拉伸到特定段落？
【发布时间】：2015-07-18 08:27:58
【问题描述】：

这是我正在尝试实现的原型这是我现在所拥有的。

我从上一个问题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，但那个帖子说也要调整高度。

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

【问题讨论】：

标签： html css image user-interface height

【解决方案1】：

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

html,body{
   height:100%;
}

【讨论】：

图片标签。图像父级是包含它的 div。我试图将父/元素容器设置为特定高度。将高度设置为 100% 会使图片消失。 html 和 body 默认不应该是 100%（整个页面）吗？
html 和 body 元素没有定义的高度，默认设置为“auto”。这是一个未定义的值。百分比属性需要引用定义的高度/宽度值。通过将 html 和 body 元素设置为定义的高度，子元素可以参考。我希望我能正确解释这一点，请随时纠正我。 link
底线，如果你想使用百分比来设置图像的高度，它所包含的父元素需要有一个定义的高度。
啊，我明白了，谢谢你的解释。你知道当我明确设置html和body的高度和宽度时，图像就完全消失了吗？
抱歉刚刚看到小提琴的链接。

【解决方案2】：

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

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

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

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

【讨论】：