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 s

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

<divclass="image"style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrUyMGfqyh4nn9s4V_HuXjrVqvNoMn29hUFIW2AUivkw-0GgqKYxKKI03o1VBp9PL1Gyj8PCA7ls_Lx54txbw5kovLbvXQeQ80kZ0KNPSO2XJIuAxS4iZ2s_KG6KcV0hczvpOHABCz8ij/s1600/imagens-lindas+(1).jpeg'); "></div>

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

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

.imageimg
{
  width: 100%;
  object-fit:cover;
  height: 300px;
}

<divclass="image"><imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrUyMGfqyh4nn9s4V_HuXjrVqvNoMn29hUFIW2AUivkw-0GgqKYxKKI03o1VBp9PL1Gyj8PCA7ls_Lx54txbw5kovLbvXQeQ80kZ0KNPSO2XJIuAxS4iZ2s_KG6KcV0hczvpOHABCz8ij/s1600/imagens-lindas+(1).jpeg"/></div>

Solution 3:

you can use this

.image
{
  position:relative;
  width: 100%;
  height: 300px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrUyMGfqyh4nn9s4V_HuXjrVqvNoMn29hUFIW2AUivkw-0GgqKYxKKI03o1VBp9PL1Gyj8PCA7ls_Lx54txbw5kovLbvXQeQ80kZ0KNPSO2XJIuAxS4iZ2s_KG6KcV0hczvpOHABCz8ij/s1600/imagens-lindas+(1).jpeg');
background-size: cover;
}

<divclass="image"></div>

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

.imageimg
{
  max-height: 300px;
}

Or Use

object-fit:cover;

But image will crop.