html - 如何调整在不同浏览器和屏幕尺寸中自动加载的图像尺寸？

Question

我有一段漂浮在右边，一张图片漂浮在左边。他们住在同一排。 现在我想让段落和图像的高度始终相等，无论它们在哪个浏览器中运行，或者它们获得的窗口或屏幕大小如何。它们的大小应该自动匹配。我该怎么做？

在我的程序中我使用了width和height，但我不确定它们是否可以自动修复大小。

我正在使用的这段代码:另请查看 https://jsfiddle.net/d6pyyub2/

.HTML:

<p>
    The height of this paragraph must be the same as the height of
    the picture.
    The height of this paragraph must be the same as the height of
    the picture.
    The height of this paragraph must be the same as the height of
    the picture.

</p>
<div id="image">
    <img alt="" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" width="200" height="200" >
</div>

.CSS:

p{
    margin-left:240px;
}

#image{
    margin-top:-210px;
}

Answer 1

通过添加容器，您可以根据另一个 block 大小设置 block 大小。 您将图像固定到容器的边框

#image{
    position: absolute;
    top:0px;
    bottom:0px;
}

#image img {
    height: 100%;
    width: auto;
}

#container
{
    position: relative;
}

p block 设置#container 的高度，图像 block 跟随移动。删除了 img 标签中属性的固定大小，以将其设置为#image block 的全高。

https://jsfiddle.net/d6pyyub2/6/

编辑:

正如 Daniel Ruf 在评论中所说，图像存在比例问题。另一种解决方案是将图像设置为#image 容器的背景。

https://jsfiddle.net/d6pyyub2/7/ 为了保持比例，如果图像的宽度需要大于 240px，即第一列的固定宽度，图像将停止缩放他的尺寸。