1

Estoy queriendo insertar muchas imágenes dentro de una celda en HTML. E probado con object-position pero no se me estarían acomodando las imágenes.

Busco que cada imagen esté una en cada esquina (superior izquierda y derecha e inferior izquierda y derecha).

Así es como lo estoy intentando:

            <tr>
                <td>1111</td>
                <td>1111</td>
                <td>1111</td>
                <td style="padding: 0; margin: 0; padding-bottom: 20px; display: flex">
                    <img style="object-position: left top; width:100px; height: 100px;" src="~/ImgAndroid/Prueba1.jpg"/>
                    <img style="object-position: right top; width:100px; height: 100px;" src="~/ImgAndroid/Prueba2.jpg"/>
                    <img style="object-position: left bottom;width:100px; height: 100px;" src="~/ImgAndroid/Prueba3.jpg"/>
                    <img style="object-position: left bottom;width:100px; height: 100px;" src="~/ImgAndroid/Prueba4.jpg"/>
                </td>
            </tr>

introducir la descripción de la imagen aquí Los estilos los puse en las etiquetas pero están en su propio archivo.

MUY vulgarmente esto es lo que busco

introducir la descripción de la imagen aquí

Y en caso de tener más de 4 imágenes, que en la última imagen pueda hacer clic y abrir todas las imágenes (Esto creo que se hace con Js, pero primero quiero ubicar cada foto en su respectivo lugar)

Espero que se haya entendido y pido perdón por la pobre imagen ilustrativa que hice para el ejemplo

1 respuesta 1

1

Podrías usar Grid layout

Ejemplo:

El ejemplo muestra las imágenes dentro de un grid de 2 columnas con filas de un mínimo de 100 píxeles y un máximo automático.

table {
  border-collapse: collapse;
}
td {
  vertical-align: center;
  border: 1px solid;
  padding: 8px;
}
img {
  border: 1px solid red;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  grid-auto-rows: minmax(100px, auto);
}
<table>
  <tr>
    <td>1111</td>
    <td>1111</td>
    <td>1111</td>
    <td>
      <div class="wrapper">
        <img alt="Image 1" />
        <img alt="Image 2" />
        <img alt="Image 3" />
        <img alt="Image 4" />
      </div>
    </td>
  </tr>
</table>

1
  • Gracias! Ahora si funciona Commented el 25 jul. 2022 a las 19:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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