CSS - IMAGENES NO SE AJUSTAN A CSS GRID

 
Vista:
Imágen de perfil de Irene
Val: 9
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

IMAGENES NO SE AJUSTAN A CSS GRID

Publicado por Irene (3 intervenciones) el 18/03/2021 15:54:09
Hola, estoy aprendiendo código y estoy realizando un ejercicio con CSS Grid, he colocado dos imagenes dentro de un grid pero no se adaptan al ancho de este, y no se qué hacer. He probado con object-fit: cover; y nada. ¿Alguien podría echarme una mano? Quiero entender por qué está pasando esto. El Grid es la sección verde, la veréis al hacer scroll.

Os dejo aquí un enlace a mi codepen: https://codepen.io/irenemorant/pen/BaQEqRy?editors=1100
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

IMAGENES NO SE AJUSTAN A CSS GRID

Publicado por joel (252 intervenciones) el 18/03/2021 16:28:27
Hola Irene, yo veo que se adaptan perfectamente a la anchura... lo que veo que la parte verde sobra mucho espacio en la parte de abajo, que eso lo puedes solucionar quitando el grid-template-rows: repeat(2, 1fr);

Es este el problema que tienes?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Irene
Val: 9
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

IMAGENES NO SE AJUSTAN A CSS GRID

Publicado por Irene (3 intervenciones) el 18/03/2021 16:33:27
¡Hola Joel! Gracias por tu ayuda, me ha servido para eliminar ese espacio que tampoco sabía como hacerlo, pero lo que quiero es que las imagenes del grid tengan el mismo tamaño, con la propiedad object-fit: cover no funciona y no se qué más hacer con esto

Mil gracias por tu ayuda!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

IMAGENES NO SE AJUSTAN A CSS GRID

Publicado por joel (252 intervenciones) el 18/03/2021 16:40:14
No entiendo... yo veo que tienen la misma anchura¿?
Puedes poner una imagen mostrando donde esta el problema haber si estoy mirando donde no es...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Irene
Val: 9
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

IMAGENES NO SE AJUSTAN A CSS GRID

Publicado por Irene (3 intervenciones) el 18/03/2021 16:44:34
Me refiero a la altura de las imagenes, que no es la misma aunque haya usado object-fit:cover y entonces las imagenes no encajan entre ellas como una grid perfecta, no se si me explico, me gustaría que la grid fueran cuatro cuadrados iguales que encajan entre si, adjunto captura de la segunda imagen.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

IMAGENES NO SE AJUSTAN A CSS GRID

Publicado por joel (252 intervenciones) el 18/03/2021 19:41:44
Ah... es que habias dicho anchura...por eso no veia el problema

No soy un experto en grid, pero no creo que modifique el tamaño de las imágenes para que todas sean iguales de altura (a no ser que se lo diga tu expresamente mediante otro estilo), entre otras cosas, porque dentro del grid puede haber cualquier cosa...
Lo que si que hace el grid, es que se adapta a la anchura y altura del contenido... pero el problema que veo, es que estas utilizando un padding:100 en los textos... si quitas ese padding, el grid e adapta a la altura de la imagen.

Pero entiendo que no quieres eso, que lo que quieres es que todas las imágenes tengan la misma altura. Ahora la pregunta. Para que la imagen de abajo crezca en altura para ser igual a la imagen de arriba, que quieres que haga la imagen de abajo, se tiene que deformar o tiene que desaparecer parte de la misma?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar