0

我有一个 div，我将其宽度设为 60%。

CSS

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

HTML

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

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

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

谢谢！

4

4 回答 4

1

可能是您需要管理元素的溢出。尝试以下操作：

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg') no-repeat;
    overflow:hidden;
}
于 2013-10-21T15:53:08.553 回答
1

您遇到的问题是您将父 div 的宽度设置为 60%。您没有为该 div 的特定图像元素指定特定宽度。我希望这会有所帮助，我不能 100% 确定我是正确的，但这就是这个网站的用途，一种帮助您解决错误的问答格式。我看到的问题是您正在设置特定 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%;
}
于 2013-10-21T15:57:28.960 回答
1

正如其他人所提到的，您似乎使用了两种相互竞争的技术 - 您在容器 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;
}
于 2013-10-21T16:00:41.587 回答
0

我不知道为什么你有背景图片和普通图片。背景图像永远不会随容器缩放。我认为您的问题是您还需要设置图像宽度。尝试

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/ 的示例

于 2013-10-21T15:52:21.510 回答