¿Cómo crear una foto de portada similar a Facebook receptiva donde la imagen siempre debe mantener la posición superior, sin estirarse ni cortarse? Traté de inspeccionar los códigos de la foto de portada de Facebook, pero todavía no puedo entender cómo funciona. He proporcionado imágenes de muestra sobre lo que necesito lograr.
Estas imágenes son mi progreso actual.
Estos son mis códigos de muestra.
HTML:
<div> <img src="onepiece.jpg" /> </div>CSS:
div{ max-width: 1024px; width: 100%; margin: 0 auto; height: 270px; position: relative; display: block; z-index: 1; overflow: hidden; margin-top: 5px; max-height: 100%; } img{ width: 100%; height: auto; position: absolute; top: -134px; }Intente utilizar object-fit para mantener la imagen con las dimensiones correctas dentro de un área, similar a cuando usa una imagen en CSS background-image . Las consultas de medios que agregué son para ajustar el tamaño del contenedor de imágenes en los tamaños de pantalla de sus capturas de pantalla.
div.img-container { max-width: 1024px; width: 100%; margin: 0 auto; height: 150px; position: relative; display: block; z-index: 1; overflow: hidden; margin-top: 5px; max-height: 100%; } img { width: 100%; object-fit: cover; object-position: center top; } @media (min-width: 576px) { div.img-container { height: 225px; } } @media (min-width: 768px) { div.img-container { height: 270px; } } <div class="img-container"> <img src="https://www.animationmagazine.net/wordpress/wp-content/uploads/One-Piece-1000-Commemorative-Battle-of-Onigashima-Visual-1000x600.jpg" /> </div>