2

por que esta diferencia en las imagenes es decir en chrome la imagen se ve desformada mientras que en Firefox se ve como espero mi codigo para ajustar las imagenes es el siguinete :

.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>

introducir la descripción de la imagen aquí

la imagen de la derecha es la que se ve correcta es decir la de fire fox

hay alguna propiedad css que uno o el otro no soporte o que?

1 respuesta 1

2

Es algo relacionado a cómo se escalan las imágenes (cuando se estiran) prueba con 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>

1
  • gracias!! @alo Malbarez no savia aserca de object-fit: scale-down;
    – andy gibbs
    Commented el 25 ago. 2018 a las 23:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.