html - How center image position with fixed height

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>

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>