8

I want to display image of any size (different width and height) in a fixed size (100px by 100px) div without changing its aspect ratio. I also want to align the image to the center inside the div. I worked on it but image with different width and height (6th) is not coming in center unless I change its aspect ratio.

<html>        
    <style>
        .A{
            border:1px dotted black;
            display:inline-block;
        }

       .B{
            border:1px solid black;
            display:inline-block;
            width: 100px;
            height:100px;
            overflow:hidden;
        }

        .C{
            border:1px solid black;
            display:inline-block;
            width: 100px;
            height:100px;
            overflow:hidden;
        }
    </style>

    1
    <div class="A"> 
        <img src="man-profile.png">
    </div>

    2
    <div class="B">
        <img src="man-profile.png">
    </div>

    3
    <div class="B">
        <img src="man-profile.png" style="width:100;">
    </div>

    4
    <div class="C">
        <img src="picture.png" style="width:100;">
    </div>

    5
    <div class="C">
        <img src="picture.png" style="height:100;">
    </div>

    6
    <div class="C">
        <img src="picture.png" style="height:100; width:100%">
    </div>
</html>

Picture attached below:

enter image description here

3
  • img {max-width:100%} Oct 13, 2017 at 13:06
  • With that I get image like (4) in the snapshot. Please see the picture. Oct 13, 2017 at 13:14
  • Well, that would "display (an) image of any size (different width and height) in a fixed size (100px by 100px) div without changing its aspect ratio". Try clarifying your question as your intended result is not clear. You can add the code you have now in a Code Snippet so it'll be easier for us to clone it to an answer, also you can generate placeholder images for the sake of demonstration here: placeholder.com so that no assumptions need to be made about image sizes and aspect ratios, which will prove more useful than a screenshot of the issue. Oct 13, 2017 at 13:18

3 Answers 3

12

Use max-width and max-height to the img tag in CSS.

img {
    display: block;
    max-width:180px;
    max-height:180px;
    width: auto;
    height: auto;
}
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

The original size of the image is 400x400 pixels, but you can resize it by CSS without any changes in aspect ratio. <img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

Another option:

If you want to add parent div to the image then you can do it something like this:

.container {
    width: 100px;
}

.container img {
    display: block;
    width: 100%;
    height: auto;
}
<div class="container">
    <img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
</div>

3

Use a background image instead. It's the easiest when you need an image to cover up the whole div, and not to change the aspect ratio.

element {
    background-repeat:no-repeat;
    background-position: center;
    background-image:url(image.jpg);
    background-size: cover;
}
0
2

Use same width and height ie(100x100) for the proportional view.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.