Home / Questions / 453884
Accepted
Richard
Asked: 2022-05-22 09:18:36 +0800 CST 2022-05-22 09:18:36 +0800 CST

How to center an image and take the largest possible size?

  • 772

I have basic knowledge in cssand tried to center these images within a divto give appearance to cards, but I can not position the images in the center. Here is the code that I tried, what is commented is the last thing I tried to do.

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

html

3 Answers

  1. you can use this in your div class

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

  2. To center an image, which I understand you want vertically, you can use flex and center align as follows:

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

    Greetings. ;)

    • 2
  3. Best Answer

    You can use:

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

    What it does is your image uses all the space .container-imgand adjusts the image to the proper size according to its dimensions:

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

    • 0