user3242861 user3242861 -4 years ago 44
CSS Question

How center image position with fixed height

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 Source

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:

  1. fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
  2. contain: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
  3. 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.
  4. 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download