Image size to fit in fixed size div

Question

I have div of fixed size height:45px and width:60px and no other css to div . This div used to show the image uploaded by customer. I want to give the dimensions of image so that the uploaded image will be fit in given div perfectly. I need to give the optimized size so that image will look good in div. First logic I tried to give the image with 45 by 60, 90 by 120 like. What is the correct way to solve this.Please guide.Thanks in advance.

Answer 1

 div { width: 160px; height: 145px; overflow: hidden; border: 1px solid black; } div img { width: 100%; min-height: 100%; }

 <div> <img src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1"/> </div>

Answer 2

Best thing is the following:

#div-to-contain-image img {
    display: block;
    height: auto;
    min-width: 100%;
    width: 100%;
}

This will render the image the best as possible. If you need to cover the containing div entirely, you could do the following:

#div-to-contain-image img {
    display: block;
    height: 100%;
    width: 100%;
}

Answer 3

I have multiple solution for you image thumbnail setting. Maybe it will be helpful for you.

Solution #1: Image vertical and horizontally center inside div

.thumb-container {
        position: relative;
        width: 60px;
        padding-bottom:45px; /* padding is using for the height of image */
        margin: 0px;
        overflow: hidden;
        border: 1px solid black;
    }
    .thumb-img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 0px;
        padding: 0px;
        overflow: hidden;
        border: 0px;
    }
    .thumb-img img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: auto;
        max-width: 100%;
    }

HTML

<div class="thumb-container">
                                                            <div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=80&h=50"></div>
                                                        </div>

View on Jsfiddle https://jsfiddle.net/5az8u7bj/

Solution #2: Image vertical and horizontally center width:100% inside div fully cover image box no white space

.thumb-container {
           position: relative;
           padding-bottom:45px;
           margin: 0px;
           overflow: hidden;
           border: 1px solid black;
           width:60px;
        }
        .thumb-img {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 0px;
            padding: 0px;
            overflow: hidden;
            border: 0px;
        }
        .thumb-img img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -100%;
            right: -100%;
            height:100%;
            margin: auto;
            width: auto;
        }

HTML

<div class="thumb-container">
                                                            <div class="thumb-img"><img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97900&w=500&h=200"></div>
                                                        </div>

View on JSfiddle https://jsfiddle.net/2d6x3fn6/1/

Maybe these solution will be helpful for you