because there is a difference in the size of the images in Chrome and Firefox

Question

because there is a difference in the size of the images in Chrome and Firefox

Navigation

#1 by (2 votes)

2

because this difference in the images is to say in chrome the image looks deformed while in Firefox it looks like I hope my code to adjust the images is the following:

.dark{

display: flex;
justify-content:center;
align-items: center;
padding: 0px;


}
.dark img{

 height: auto;
 max-width: 100%;
 width: 100%;
 max-height:550px;

}

      <div class="dark">
           <div>
    
         <img id="img"  src="https://i.imgur.com/x8SPZUF.jpg"> 
               
         </div>
      </div>

the image on the right is the one that looks correct ie the fire fox image

Is there any CSS property that one or the other does not support or what?

html css

asked by andy gibbs 25.08.2018 в 23:13

source

1 answer

Return a list of an object I have two WHILE loops and the second one skips

score 2 · Accepted Answer

It's related to how images are scaled (when stretched) try object-fit: scale-down;

.dark {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  width: 100%
}

.dark img {
  object-fit: scale-down;
  height: auto;
  max-width: 100%;
  width: 100%;
  max-height: 550px;
}

<div class="dark">
  <div>

    <img id="img" src="https://i.imgur.com/x8SPZUF.jpg">

  </div>
</div>