3

Tengo el conocimiento básico en css e intentado centrar dichas imágenes dentro de un div para dar aspecto a tarjetas, pero no logro posicionar en el centro las imágenes. aquí el código que e intentado, lo que esta comentado es lo ultimo que intente realizar.

.container-img {
    width: 250px;
    height: 150px;
    box-shadow: 5px 5px 10px rgba(59, 58, 58, 1);
    border-radius: 10px;
    margin: 10px auto;
    display: block;
    overflow:hidden;
}
.container-img img{
    width:100%;
    /* display: block; */
    /* margin: auto auto; */
    /* text-align: center; */
    /* object-fit: contain; */
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div class='container-img'>
        <img src="https://example.com.au/wp-content/uploads/2020/03/EXAMPLE-LOGO-BLACK.png" alt='ejemplo' />
    </div>
</body>

</html>

3 respuestas 3

2

puedes usar esto en tu class del div

display:flex;
justify-content: center;
align-items: center;
1
2

Para centrar una imagen, que según entiendo la quieres verticalmente puedes utilizar flex y alineación al centro de la siguiente forma:

.container-img {
    width: 250px;
    height: 150px;
    box-shadow: 5px 5px 10px rgba(59, 58, 58, 1);
    border-radius: 10px;
    margin: 10px auto;
    display: block;
    overflow:hidden;
}
.container-img {
    display: flex;
    align-items: center;
}
.container-img img{
    width:100%;
}
<!DOCTYPE html>
<html lang="en">
    <head>
    </head>

    <body>
        <div class='container-img'>
            <img src="https://example.com.au/wp-content/uploads/2020/03/EXAMPLE-LOGO-BLACK.png" alt='ejemplo' />
        </div>
    </body>
</html>

Saludos. ;)

0

Puedes usar:

.container-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Lo que hace es tu imagen utilice todo el espacio de .container-img y ajuste la imagen al tamaño adecuado de acuerdo a sus dimensiones:

.container-img {
    width: 250px;
    height: 150px;
    box-shadow: 5px 5px 10px rgba(59, 58, 58, 1);
    border-radius: 10px;
    margin: 10px auto;
    display: block;
    overflow:hidden;
}

.container-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
<div class='container-img'>
  <img src="https://via.placeholder.com/200x100" />
</div>
<div class='container-img'>
  <img src="https://via.placeholder.com/100x208" />
</div>

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.