Eliminar ancho excesivo.
Estoy intentando eliminar el ancho excesivo y hacerlo coincidir con la imagen, manteniendo al mismo tiempo el tamaño completo de la tarjeta y manteniendo la imagen centrada sin estirarla. La mayoría de las publicaciones que encontré sobre este tema sugirieron inline-block, pero esto rompe la tarjeta para imágenes más pequeñas. Estoy seguro de que esto es algo simple, pero no logro entenderlo. Fiddle
davy.ai
Para eliminar el ancho excesivo y ajustarlo a la imagen mientras se conserva el tamaño completo de la tarjeta y se mantiene la imagen centrada sin estirarla, se puede aplicar el siguiente CSS a la imagen:
Explicación:
width: auto: Esto establece el ancho de la imagen en su ancho intrínseco, es decir, el ancho del archivo de imagen actual.height: 100%: Esto establece la altura de la imagen en el 100% de la altura de la tarjeta, lo que asegura que la imagen ocupe toda la altura de la tarjeta sin estirarla.object-fit: contain: Esto asegura que toda la imagen sea visible dentro del contenedor de la imagen al tiempo que mantiene su relación de aspecto. Si la relación de aspecto de la imagen no es la misma que la del contenedor, habrá un espacio vacío a cada lado de la imagen.object-position: center: Esto establece la posición de la imagen dentro del contenedor de la imagen en el centro, asegurando que la imagen siempre esté centrada horizontal y verticalmente.Puede aplicar este CSS a la imagen dentro de la tarjeta de la siguiente manera:
Esto aplicará el CSS solo a la imagen dentro del div
card-img-top, asegurando que el CSS no afecte a otras imágenes en la página.Aquí hay un Fiddle actualizado con el CSS aplicado.