CSS image height with strange behavior

Question

I have a picture and a form side-by-side but I'm not being able to achieve the desired effect. This is what it initially looks like:

Which is cool, but the picture is way to big. The picture contained can vary, so a fixed width and height is not an option, because it would deform the image. I would like to give it a height property and let it adjust the width accordingly. This is what I get if I do that:

I don't understand why the image is aligning to the bottom... The chrome metrics show nothing in that space. No padding, no margin, nothing. I cannot use negative margins because resizing the browser window causes the layout to respond and the image is thrown out of the window. This is what it looks like with a margin-top of -270px (this is exactly what I want).

But if I resize this is what happens.

Here's an HTML snippet. Please tell me if you need more code:

<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>

Edit:

I created a bootply, and I just added code until the issue replicated. I hope it's enough. Here it is: http://bootply.com/76022

Answer 1

You might consider this:

First step: using a div with a width and height:

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

Than apply CSS

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

Step two: Wrap the image in it as:

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

Try to apply the css

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

This CSS will make it get the height and width according to the div. The div has 500px width so the width will never be more than that.

Third step:

Now to make sure it stays at the top left use this:

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

The third step means that the image should have 0 margin from left and top.

Answer 2

Try using absolute positioning to put it at the top of the containing div, like so:

<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>

and

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