0

tengo un problema y es que cuando quiero colocar una imagen dentro de un cuadro de una tabla, la imagen daña el tamaño del cuadro y de otros mas. ¿Cómo podría colocar una imagen dentro de un cuadro de una tabla sin que se dañe la tabla y que la imagen ocupe todo el espacio del cuadro. esto es lo único que tengo hecho. Agradezco quien me pueda ayudar con esto

.grid-container {
    display: grid;
    grid-template-columns: 126px 126px 126px 126px;
}

.grid-item {
    background-color: #ffffffcc;
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 53px;
    text-align: center;
}
<div class="grid-container">
      <div class="grid-item">
        <img id="imagen" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRthhsaSC1TGny56CzWcTci76LLdaYl6lke9w&usqp=CAU">
      </div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>  
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>  
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
      <div class="grid-item">10</div>
      <div class="grid-item">11</div>
      <div class="grid-item">12</div>  
      <div class="grid-item">13</div>
      <div class="grid-item">14</div>
      <div class="grid-item">15</div>  
      <div class="grid-item">16</div>  
</div>

1
  • 1
    Añade propiedades CSS a tu id imagen, como un ancho máximo, algo así como #imagen { width: 40px; }, con eso ya solucionarías muchas cosas. Agrega lo que has intentando. el 22 may. 2021 a las 1:19

1 respuesta 1

2

Le puedes agregar la propiedad grid-template-rows al grid para que cada cuadro tenga un tamaño y a la imagen le colocas width y height 100% así ocupa todo el espacio del cuadro. Adicionalmente, la propiedad object-fit: cover; hace que la imagen mantenga su aspecto sin distorsionarse.

.grid-container {
    display: grid;
    grid-template-columns: 126px 126px 126px 126px;
    grid-template-rows: 126px 126px 126px 126px;
}

.grid-item {
    background-color: #ffffffcc;
    border: 1px solid rgba(0, 0, 0, 0.8);
 
    text-align: center;
}

.grid-item img{
   width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="grid-container">
      <div class="grid-item">
        <img id="imagen" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRthhsaSC1TGny56CzWcTci76LLdaYl6lke9w&usqp=CAU">
      </div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>  
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>  
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
      <div class="grid-item">10</div>
      <div class="grid-item">11</div>
      <div class="grid-item">12</div>  
      <div class="grid-item">13</div>
      <div class="grid-item">14</div>
      <div class="grid-item">15</div>  
      <div class="grid-item">16</div>  
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.