Estoy tratando de crear una página de memes y tener contenedores llenos de imágenes. Algunas imágenes son anchas y otras súper largas, quiero mostrarlas de tal manera que el contenedor tenga un tamaño establecido (por ejemplo, 50% del ancho de la pantalla, la altura puede ser automática) y la imagen interior esté recortada y centrada. Creo que lo mejor es ilustrarlo con algunas fotos.

Esto es lo que quiero:

Y esto es lo que obtengo:

La clave es obtener estas franjas blancas en la parte superior e inferior si la imagen es demasiado ancha e izquierda y derecha si la imagen es demasiado larga.

Aquí está mi código CSS:

 .homePage { width: 100%; min-height: calc(100vh - 80px); height: auto; display: flex; flex-direction: column; align-items: center; padding-top: 20px; } .homePage .post { width: 50%; background-color: rgb(250, 250, 250); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; margin: 20px; padding: 20px; border-radius: 15px; } .post .postHeader { display: flex; justify-content: center; width: 100%; } .postHeader .title { flex: 50%; } .postHeader .deletePost { flex: 50%; display: flex; flex-direction: column; align-items: flex-end; } .deletePost button { border: none; background: none; font-size: 30px; cursor: pointer; } .post .postImgContainer { word-wrap: break-word; height: auto; width: 100%; display: flex; flex-direction: column; justify-content:center; overflow: hidden; overflow-y: auto; }

Y mi código HTML:

 <div className="homePage"> {imageLists.map((image) => { return ( <div className="post"> <div className="postHeader"> <div className="title"></div> </div> <div className="postImgContainer"> {" "} <img src={image}></img>{" "} </div> </div> ); })} </div>

Cada vez que cambio la dirección flexible de column a row en .postImgContainer , parece estar funcionando, pero solo para un caso de imágenes, el otro se estira.

¡Gracias por tu ayuda!