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

通过添加容器，您可以设置依赖于另一个块大小的块大小。您将图像设置为固定到容器的边框

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

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

#container
{
    position: relative;
}

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

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

修改

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

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

Answer 2

你去了：http://jsfiddle.net/d6pyyub2/4这应该可以解决你的问题

.image {
    width: 200px;
    height: 200px;
    float: left;
    margin-right: 10px;
}
.para {
    line-height: 1.5;
    text-align: justify;
    padding-right: 5px;
}

如何调整在不同浏览器和屏幕大小中自动加载的图像大小？

2 个答案: