Question

我希望图像完全适合div

CSS部分是：

            #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;
            }

html部分是：

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

输出结果为：

enter image description here

图像宽度超过了div的宽度。

目前我只将李的背景颜色设置为白色，但即使我将src提供给img标签，问题仍然存在......

Answer 1

您为图片使用1px边框...

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

应该用于您的图片。或者无论如何应该使用带有边框的元素。

无论如何，我会使用这个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%;
}

Answer 2

您还应将box-sizing设置为图像。

.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

说明：原因是因为按照width设置，图片需要100％，并且仍然需要额外的边框。通常box-sizing为padding-box，而border不是广告框宽度的一部分。使用border-box时，边框尺寸也会成为100％宽度的一部分。

Answer 3

将边距，线宽定义为像素（例如1px）而不是百分比。像素线宽应始终采用固定数量的像素，其中百分比可能会因窗口大小甚至放置而异。

图像缩放的大小通常是一个百分比。

Answer 4

实际上，带有.gPop-gallery的{{1}}类会导致问题但是如果你使用margin-left: 8%代替百分比，它可以更好地工作。

Answer 5

width:100%在这里不起作用，因为图像的实际尺寸变为100％+ 2px的边框。（左边框为1px，右边框为1px）。

您可以使用calc()解决此问题。

将width:100%更改为width:calc(100% - 2px)。

请注意，这不适用于所有浏览器。

请在此处查看DEMO。

html-将图像完美地放在div中

5 个答案: