Tengo la siguiente estructura:
<body>
<div class="container">
<img
src="https://images.unsplash.com/photo-1590507014612-08b6a0b4e31e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1568&q=80"
alt=""
/>
</div>
La idea es poder mostrar la imagen completa, sin que esta se corte.
Intente darle los siguientes estilos:
.container {
height: 100vh;
overflow: hidden;
}
img {
width: 100%;
object-fit: cover;
}
Pero no obtengo los resultados que deseo.
¿Hay alguna manera de hacer esto para que se muestre completamente la imagen?
Les dejo un ejemplo para que puedan ver el resultado que obtengo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.container {
height: 100vh;
overflow: hidden;
}
img {
width: 100%;
object-fit: cover;
}
<body>
<div class="container">
<img
src="https://images.unsplash.com/photo-1590507014612-08b6a0b4e31e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1568&q=80"
alt=""
/>
</div>
</body>