Question

我有一个div，我给的宽度为60％。

CSS

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg');
}

HTML

<div id="image">
     <img src="cleaning.jpg" />
</div>

我的问题是图片在整个页面上以完整尺寸显示！

如何将其限制在所包含的div中？

谢谢！

Answer 1

可能是您需要管理元素的溢出。请尝试以下方法：

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg') no-repeat;
    overflow:hidden;
}

Answer 2

您遇到的问题是您将父div设置为宽度为60％。您没有为该div指定特定图像元素的特定宽度。我希望这有帮助，我不是百分百肯定我是正确的，但这就是这个网站的用途，一个问答格式，以帮助你解决你的错误。我如何看待它的问题是，您要设置特定div的宽度，并向其添加背景图像，这不需要您设置<img></img>元素。所以实际上你在同一个地方有两个图像副本，一个宽度为60％，第二个全尺寸图像覆盖另一个。您必须设置<img></img>元素的宽度。

<强> CSS：

#image {
    float: left;
    width: 60%;
    /* No need for a background image to be set if you're using <img></img> */
}

#image img {
   width: 100%;
}

Answer 3

正如其他人所提到的，你似乎使用了两种竞争技术 - 你在容器div上有一个背景图像，但你也得到了容器div所包含的相同图像。选择一个。

对于背景图像技术，您可能希望使用以下内容：

#image {
    width: 60%;
    background:url('cleaning.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 4

我不确定为什么你有背景图像和正常图像。背景图像永远不会随容器缩放。我认为你的问题是你需要设置你的图像宽度。尝试

<强> CSS

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg');
}
#image img {
    width:100%;
}

<强> HTML

<div id="image">
     <img src="cleaning.jpg" />
</div>

http://jsfiddle.net/f5Ls3/

的示例

没有http://jsfiddle.net/f5Ls3/1/

的示例

图像百分比不受限制

4 个答案: