Skip to main content

.A1_post-galery-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row wrap;
}
.A1_post-galery-item-container1{
    flex: 1 2 auto;
    width: auto;
    height: auto;
    min-width: 250px;
    max-width: 400px;
}
.A1_post-galery-item-container2{
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
    background: red;
    box-sizing: border-box;
    border: 1px solid blue;
    overflow: hidden;
}
.A1_post-galery-item{
    width: auto;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div class="A1_post-galery-container">
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://cdn.computerhoy.com/sites/navi.axelspringer.es/public/styles/1200/public/media/image/2018/10/inventan-material-que-puede-convertir-olas-mar-electricidad.jpg?itok=IMODjeaT" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://saludsinbulos.com/wp-content/uploads/2019/08/agua-de-mar-superemedio.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://www.conmishijos.com/assets/posts/14000/14825-adivinanzas-para-ninos-de-mar.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://services.meteored.com/img/article/-por-que-el-mar-es-azul--9441-2_1280.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEKxf-r2mHoRMpxXWRPr1IWXA7bvrct1-OmQ&usqp=CAU" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/10/Crear-una-galeria-de-imagenes-responsive.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
</div>

.A1_post-galery-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row wrap;
}
.A1_post-galery-item-container1{
    flex: 1 2 auto;
    width: auto;
    height: auto;
    min-width: 250px;
    max-width: 400px;
}
.A1_post-galery-item-container2{
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
    background: red;
    box-sizing: border-box;
    border: 1px solid blue;
    overflow: hidden;
}
.A1_post-galery-item{
    width: auto;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div class="A1_post-galery-container">
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://cdn.computerhoy.com/sites/navi.axelspringer.es/public/styles/1200/public/media/image/2018/10/inventan-material-que-puede-convertir-olas-mar-electricidad.jpg?itok=IMODjeaT" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://saludsinbulos.com/wp-content/uploads/2019/08/agua-de-mar-superemedio.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://www.conmishijos.com/assets/posts/14000/14825-adivinanzas-para-ninos-de-mar.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://services.meteored.com/img/article/-por-que-el-mar-es-azul--9441-2_1280.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEKxf-r2mHoRMpxXWRPr1IWXA7bvrct1-OmQ&usqp=CAU" alt="img" class="A1_post-galery-item">
        </div>
    </div>
    <div class="A1_post-galery-item-container1">
        <div class="A1_post-galery-item-container2">
            <img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/10/Crear-una-galeria-de-imagenes-responsive.jpg" alt="img" class="A1_post-galery-item">
        </div>
    </div>
</div>

Origen Enlace
davidbug
  • 480
  • 3
  • 5

Una posible solución con CSS es la siguiente:

.A1_post-galery-item{
    width: auto;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

Las propiedades top y left al 50% mueven la imagen al centro del div contenedor y transform translate X e Y al menos 50% la mueven media longitud del ancho y alto de la imagen hacia la izquierda y hacia arriba, de esta manera aparece centrada.