CODEWITHSUNDEEP
htmlcss
Engineer
Engineer

Reputation: 161

html- placing image perfectly inside div

I want an image to perfectly fit into a div

The CSS part is:

            #demo1 ul li { 
            width: 12.5%;
            }   

            .gPop-gallery {
            display: block;
            margin-top: -1%;
            margin-left: 8%;
            }

            .gPop-gallery ul {
            width: 98%;
            list-style-type: none;
            display: inline-block;
            padding-left: 15px;
            }

            .gPop-gallery ul:first-child li {
            margin-top: 1%; 
            }

            .gPop-gallery ul li {
            float: left; 
            width: 100%;
            border-radius: 3px;
            margin-top: -1.5%;
            margin-right: 1%;
            overflow: hidden;
            background-color: white;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            }

            .gPop-gallery ul li div img {
            display: block;
            width: 100%;
            height: 100%;
            border: 1px solid red;
            }

The html part is:

<div class="gPop-gallery" id="demo1">

            <ul>                  
                <li><div style="position: relative;"><img class="imgs" id="0" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="1" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="2" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="3" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="4" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="5" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="6" src=""></div></li>
            </ul> 
            <ul>                  
                <li><div style="position: relative;"><img class="imgs" id="7" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="8" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="9" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="10" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="11" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="12" src=""></div></li>
                <li><div style="position: relative;"><img class="imgs" id="13" src=""></div></li>
            </ul> 

        </div>

The output is:

enter image description here

The image width is exceeding div's width.

Currently I've just set li's background color as white, but even after I give src to img tag, the problem remains...

Upvotes: 0

Views: 635

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

You use 1px border for your images...

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

should go for your images. or in any case to the element that has the border.

Anyhow, I would use this CSS: jsBin demo

.gPop-gallery ul {
    background:#444;
    list-style-type: none;
    padding: 0%;
}
.gPop-gallery ul li {
    float: left; 
    width: 12.2%;
    border-radius: 3px;
    margin: 1%;
    overflow: hidden;
    background-color: white;
    border: 1px solid red;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.gPop-gallery ul li div img {
    display: block;
    width: 100%;
    height: 100%;
}

Upvotes: 3

codingrose
codingrose

Reputation: 15699

width:100% is not working here, because actual size of image becomes 100% + 2px of border.(1px for left border and 1px for right border).

You can solve this by using calc().

Change width:100% to width:calc(100% - 2px).

Please note, this does not work with all browsers.

See DEMO here.

Upvotes: 0

Super Hornet
Super Hornet

Reputation: 2907

Actually, the .gPop-gallery class with margin-left: 8% causes the problem but if you use px instead of percent it could work better.

Upvotes: 0

Harry
Harry

Reputation: 89750

You should set the box-sizing to the images also.

.gPop-gallery ul li div img {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}

Demo

Explanation: The reason is because as per width setting, the image would take 100% and it still has an extra border to fit. Generally box-sizing is padding-box and the border is not a part of the box width. When using border-box the border size also becomes a part of the 100% width.

Upvotes: 1

Pieter21
Pieter21

Reputation: 1845

Define margins, linewidths as pixels (e.g. 1px) instead of percentage. The pixel linewidth should always take fixed number of pixels, where percentages may vary depending on window size and even placement.

Size for scaling of images would indeed typically be a percentage.

Upvotes: 0

Related Questions