es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS Grid: Desbordamiento de imagen en altura

27 Jul, 2023 Programación

Tengo una cuadrícula CSS simple con 2 columnas (60%, 40%). La primera está llena con una imagen.
La imagen está bien contenida dentro de la cuadrícula cuando tiene suficiente altura.

El problema ocurre cuando no tiene suficiente altura, la imagen se desborda en altura.
Me gustaría que se mantenga dentro de la cuadrícula y la llene independientemente del tamaño de la ventana.

Aquí está el código:

.container {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100vh;
  border: 2px solid red;
}

.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <img class="picture" src="https://i.pinimg.com/550x/e4/7e/00/e47e006f1cf838ccf5468e8548a7577c.jpg">
  <p class="text">Some text</p>
</div>

Aquí hay un JSFiddle: https://jsfiddle.net/f4us5krq/1/

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para asegurarse de que la imagen se mantenga contenida dentro de la cuadrícula, puedes establecer la altura de .container en auto en lugar de 100vh. Esto permitirá que el contenedor ajuste su altura en función del contenido que contiene, y la imagen se mantendrá contenida dentro de la columna del 60%. Aquí está el código CSS actualizado:

    .container {
  display: grid;
  grid-template-columns: 60% 40%;
  height: auto;
  border: 2px solid red;
}

.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    También puedes agregar la propiedad object-position: center a la clase .picture para asegurarte de que la imagen se mantenga centrada dentro de su contenedor. Esto evitará que se recorte si es demasiado ancha para la columna.

    .picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

    Con estos cambios, tu imagen debería mantenerse contenida dentro de la cuadrícula y llenar la columna independientemente del tamaño de la ventana.

Comments are closed.