¿Como alinear imágenes html con css, en: varias filas y colocando en cada una de ellas, de 3 a 4 imágenes alineadas?

publicado por: Anonymous

Intento desde wordpress insertar y alinear imágenes colocando de 3 a 4 en cada fila, ejemplo:

¿Como hacerlo con CSS, y ponerle la propiedad para que se vea responsive?

_x000D_

_x000D_

<img> <img> <img> <img>_x000D_
  <img>  <img>  <img>_x000D_
<img> <img> <img> <img>_x000D_
  <img>  <img>  <img>

_x000D_

_x000D_

_x000D_

_x000D_

_x000D_

<img src="http://foroam.com/wp-content/uploads/2017/02/CMIC_Fondo-de-fondos_logo_baja.jpg" alt="" width="346" height="207" class="alignleft size-full wp-image-3032" />_x000D_
<img src="http://foroam.com/wp-content/uploads/2017/02/LOGO-MV.jpg" alt="" width="346" height="207" class="alignleft size-full wp-image-3035" />_x000D_
<img src="http://foroam.com/wp-content/uploads/2017/02/Nafin_logo_1.png" alt="" width="346" height="207" class="alignleft size-full wp-image-3037" />

_x000D_

_x000D_

_x000D_

solución

El truco es agregarles el atributo "display inline" para hacerlos en línea, y después usar porcentaje en lugar de píxeles.

Para la primera columna hacemos esta matemática:

100% (tamaño de la div parent) / 4 (Número de imágenes) = 25%

Para la segunda columna:

100% (tamaño de la div parent) / 3 (Número de imágenes) = 33.3%

Todo en conjunto será así:

Edición:

Si desea añadir un ancho máximo, utilice max-width.
(Ya implementado abajo)

_x000D_

_x000D_

.imgWrapper4, .imgWrapper3 {
    font-size: 0;
    text-align: center;
}
.imgWrapper4 .imgResponsiva,
.imgWrapper3 .imgResponsiva {
    display: inline-block;
    font-size: inherit;
}
.imgWrapper4 .imgResponsiva {width: 25%; max-width: 345px;}
.imgWrapper3 .imgResponsiva {width: 33.3%; max-width: 345px;}

.imgResponsiva img {
    height: auto;
    width: 100%;
}

_x000D_

<div class="imgWrapper4">
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/food"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/sports"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/city"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/abstract"/>
    </div>
</div>

<div class="imgWrapper3">
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/business"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/nightlife"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/fashion"/>
    </div>
</div>

_x000D_

_x000D_

_x000D_

Nueva Edición:

Para poner un espacio entre cada imagen, hace lo siguiente:
(Haz clic en el botón de abajo Mostrar fragmento de código para mostrar el código) O también puede verlo aquí – https://jsfiddle.net/shuffledPixels/8j4gtbb3/1/

_x000D_

_x000D_

.imgWrapper4, .imgWrapper3 {
    font-size: 0;
}
.imgWrapper4 .imgResponsiva,
.imgWrapper3 .imgResponsiva {
    display: inline-block;
    font-size: inherit;
    padding: 10px;                  /* Cambie el valor de espaciado como desee aquí */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.imgWrapper4 .imgResponsiva {width: 25%;}
.imgWrapper3 .imgResponsiva {width: 33.3%;}

.imgResponsiva img {
    height: auto;
    width: 100%;
}

_x000D_

<div class="imgWrapper4">
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/food"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/sports"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/city"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/abstract"/>
    </div>
</div>

<div class="imgWrapper3">
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/business"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/nightlife"/>
    </div>
    <div class="imgResponsiva">
        <img src="http://lorempixel.com/200/200/fashion"/>
    </div>
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *