0

hoy eh estada trabajando en un proyecto simple ya que eh estado aburrido. todo bien hasta que creé esta "galería de imágenes" y no pude encontrar la forma de que las imágenes se centraran, intente usando el siguiente código:

.contenedor{
    width: 200px;
    height: 200px;
    position: relative;
}
.imagen{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

pero solo funciona cuando la imagen es mas pequeña que el contenedor.

aquí os dejo mi código:

.A1_post-galery-container{
    width: 100%;
    height: auto;
}
.A1_post-galery-item-container1{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.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: 0;
    left: 0;
}
<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 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 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 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>

me gustaría que las imágenes estuviesen centradas. de antemano gracias por su ayuda.

1 respuesta 1

2

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.

.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>

1
  • si sabia que podía hacer esto, el problema es que para que quedase centrada tenia que restar el tamaño medio de la imagen. y este era flexible lo que hice fue con ayuda de css grid establecer un tamaño fijo. procedo a editar tu respuesta. Commented el 6 jun. 2021 a las 22:51

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.