Estoy tratando de representar divs que tiene una propiedad css de imagen de fondo. Las imágenes son de tamaño fijo y quiero representarlas en un diseño de cuadrícula. Sin embargo, los divs que tienen una imagen de fondo se extienden cuando tienen espacio disponible y yo no. No soy un experto en CSS, por lo que cualquier ayuda sería muy apreciada. El html y css están abajo.

.inner-tile {
      display: grid;
      grid-gap: 1em;
      justify-items: center;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr ));
      grid-template-rows: 1fr;
      width: 98%;
      height: 100%;
      padding-top: 1%;
      padding-right: 1%;
      padding-left: 1%;
      /*border: 1px solid red;*/
      font-size: 18px;
    }
    
    .event {
      display: grid;
      grid-gap: 5px;
      grid-template-rows: 1fr;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      justify-items: center;
      border: 1px solid grey;
      border-radius: 4px;
      min-width: 240px;
      min-height: 200px;
      height: 100%;
      width: 100%;
    }
    
    .event-image {
      background: url('https://placekitten.com/200/200');
      background-repeat: vertical;
      background-size: 100%;
      width: 100%;
      height: 100%;
    }
<div class = "inner-tile">
        <div class = "event">
          <div class="event-image"></div>
          <h3 class = "learn-more">Corporate Event</h3>
        </div>          
        <div class = "event">
          <div class="event-image"></div>
          <h3 class = "learn-more">Weddings</h3>
        </div>          
        <div class = "event">
          <div class="event-image"></div>
          <h3 class = "learn-more">Party</h3>
        </div>                 
      </div>
0
Ninja47 8 oct. 2019 a las 16:29

4 respuestas

La mejor respuesta

Cuando usa porcentajes en width: y height:, ocuparán ese porcentaje del espacio de ventana disponible. Entonces, si tiene width: 100%;, siempre tomará todo el ancho disponible en la ventana (100% del ancho disponible).

Si desea que solo ocupe unos pocos píxeles, use width: 100px;, que usará 100 píxeles sin importar qué.

1
Rojo 8 oct. 2019 a las 13:36

He tenido este tipo de problema antes, pero hay una solución básica en CSS:

    .class img 
    {
    background-repeat:no-repeat;
    background-size:cover;
    }

¡Esto debería funcionar bien!

0
yosh 8 oct. 2019 a las 15:09

Debe usar píxeles en lugar de porcentaje si desea un ancho y alto fijos para la imagen, por ejemplo:

.event-image {
  background: url('https://placekitten.com/200/200');
  background-repeat: vertical;
  width: 120px;
  height: 120px;
}
0
theincrediblethor 8 oct. 2019 a las 13:39

Prueba esto

.event-image {
   background-size: cover;
}
2
Awais 8 oct. 2019 a las 13:36