CSS image height with strange behavior - html

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