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

Question

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

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

我不明白为什么图像与底部对齐......镀铬指标在该空间中没有显示任何内容。没有填充，没有边距，什么都没有。我不能使用负边距，因为调整浏览器窗口的大小会导致布局响应并且图像被抛出窗口。这就是 -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>

编辑：

我创建了一个引导程序，我只是添加了代码，直到问题被复制。我希望这已经足够了。这是：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 的宽度为 500 像素，因此宽度永远不会超过该宽度。

第三步：

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

.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
};