How center image position with fixed height - html

Question

I can't show an image well with fixed height because shows stretched, i want to position image.
I want to can use large images with 300px of fixed height but the image can't show stretched.
The image link have to come in img tag because it come from database.
I put here a example code:
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
width: 100%;
height: 300px;
}
<div class="image">
<img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>
Thank you

Answer 1

Use background-image inline and just cover it using background-size: cover;
.image
{
position:relative;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="image" style="background-image: url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg'); "></div>

Answer 2

You can use object-fit to get the same
The object-fit property defines how an element responds to the height
and width of its content box. It's intended for images, videos and
other embeddable media formats in conjunction with the object-position
property. Used by itself, object-fit lets us crop an inline image by
giving us fine-grained control over how it squishes and stretches
inside its box.
object-fit can be set with one of these five values:
fill: this is the default value which stretches the image to fit the
content box, regardless of its aspect-ratio.
contain: increases or decreases the size of the image to fill the
box whilst preserving its aspect-ratio.
cover: the image will fill the height and width of its box, once
again maintaining its aspect ratio but often cropping the image in
the process. none: image will ignore the height and width of the
parent and retain its original size.
scale-down: the image will compare the difference between none and
contain in order to find the smallest concrete object size.
Object-fit
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
width: 100%;
object-fit:cover;
height: 300px;
}
<div class="image">
<img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>

Answer 3

you can use this
.image
{
position:relative;
width: 100%;
height: 300px;
background-image:url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg');
background-size: cover;
}
<div class="image">
</div>

Answer 4

You cannot use width and height for an image tag it will stretch the image. So use either width or height.
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
max-height: 300px;
}
Or Use
object-fit:cover;
But image will crop.