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

Question

我有一张并排的照片和形式，但我无法达到预期的效果。这是它最初的样子：

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

我不明白为什么图像与底部对齐...... Chrome指标在该空间中没有显示任何内容。没有填充，没有边距，没有。我不能使用负边距，因为调整浏览器窗口大小会导致布局响应并且图像被抛出窗口。这是-270px的margin-top看起来的样子（这正是我想要的）。

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

这是一个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，我只是添加了代码，直到问题被复制。我希望这就够了。这是：http://bootply.com/76022

Answer 1

你可能会考虑这个：

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

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

比应用CSS

.div {
width: 500px;
height: 300px;
}

第二步：将图片包装为：

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

尝试应用css

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

这个CSS会根据div获得高度和宽度。 div的宽度为500px，所以宽度永远不会超过。

第三步：

现在确保它保持在左上角使用：

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

第三步意味着图像左上角和下边距应为0。

Answer 2

尝试使用绝对定位将其放在包含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>

和

img-form-container {
    position: relative;
};
img-polaroid {
    position: absolute;
    top:0px; //this can be changed to give it margin
};