Html 具有奇怪行为的CSS图像高度

我有一张图片和一张表格并排，但我不能达到预期的效果。这就是它最初的样子：

这很酷，但画面太大了。包含的图片可能会有所不同，因此不能选择固定的宽度和高度，因为这会使图像变形。我想给它一个高度属性，让它相应地调整宽度。如果我这样做，我会得到：

我不明白为什么图像会与底部对齐。。。chrome度量在该空间中没有显示任何内容。没有空白，没有空白，什么都没有。我不能使用负边距，因为调整浏览器窗口的大小会导致布局响应，并且图像会被抛出窗口。这就是它看起来的样子，最高保证金为-270px（这正是我想要的）

但如果我调整大小，就会发生这种情况

下面是一个HTML片段。如果您需要更多代码，请告诉我：

<div class="well second-step">
    <div>
        <div><img class="img-polaroid"></div>
        <div style="">
            <form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
                <div class="control-group">
                    <input type="text" name="title" placeholder="Look's title">
                </div>
                <div class="control-group">
                    <textarea name="description" placeholder="Description"></textarea>
                </div>
                <div style="margin-left: 50px;">
                    <input type="reset" class="btn btn-danger" value="Cancel">
                    <input type="submit" class="btn btn-success" value="Publish">
                </div>
                <input type="hidden" name="image">
            </form>
        </div>
    </div>
</div>

编辑：

---

我创建了一个bootply，我只是添加了代码，直到问题再次出现。我希望这足够了。这是：

尝试使用绝对定位将其放置在包含div的顶部，如下所示：

<div class="well second-step">
    <div id="img-form-container">
        <div><img class="img-polaroid"></div>
        <div style="">
            <form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
                <div class="control-group">
                    <input type="text" name="title" placeholder="Look's title">
                </div>
                <div class="control-group">
                    <textarea name="description" placeholder="Description"></textarea>
                </div>
                <div style="margin-left: 50px;">
                    <input type="reset" class="btn btn-danger" value="Cancel">
                    <input type="submit" class="btn btn-success" value="Publish">
                </div>
                <input type="hidden" name="image">
            </form>
        </div>
    </div>
</div>

---

你可以考虑这个问题：

第一步：使用具有宽度和高度的div：

<div class="image"></div>

第二步：将图像包装为：

<div class="image"><img src="~/folder/file.png" alt="photo: /></div>

此CSS将使其根据div获得高度和宽度。div的宽度为500px，因此宽度永远不会超过此值

第三步：

现在，要确保它保持在左上角，请使用以下命令：

.image img {
position: absolute;
top: 0px;
left: 0px;
}

---

第三步意味着图像从左到上应该有0边距

你能为你的CSS添加一个标签吗。我觉得这可能是一个问题，因为

vertical align

。我看不到任何图像：（你能做一把小提琴吗？因为你在使用Bootstrap，所以做一个@AndréFratelli:你的问题解决了吗？如果没有，看看这个。让我知道这是否是你想要的。它好多了！但它仍然会使图像变形=（你在使用这个百分比吗？如果你使用这个百分比，那么图像就永远不会走出来。你也可以考虑使用这个：<代码>图片{边框：1px实心333 }。检查此宽度的div大小。这样图像应始终保持在限制内。之后，将应用宽度和高度。确保图像保持在边界内。position属性将确保图像始终位于左上角。是的，我使用了百分比！图像不完全保持在左上角n限制，因为它有填充，但我认为这没关系。除了图像失真，一切似乎都很好。看这里，图像应该像我最初的帖子中那样进行平方：然后错误就没有了，然后是宽度和高度。正方形的宽度和高度是相同的，我们没有使用相同的值！两个都使用500px。这会解决它。顺便说一句，我还添加了一个位置：relative；到包含图片的div。否则，图像将相对于窗口进行定位。

<div class="image"><img src="~/folder/file.png" alt="photo: /></div>

.image img {
width: 100%;
heighti: 100%;
}

.image img {
position: absolute;
top: 0px;
left: 0px;
}