Html 如何防止定位块图像滑出页面？_Html_Css

Html 如何防止定位块图像滑出页面？

html css

Html 如何防止定位块图像滑出页面？,html,css,Html,Css,当我调整窗口太小时，图像会从页面左侧滑出。甚至无法滚动到它。如何防止图像从页面上滑落？问题是绝对的div，但我不知道没有它们如何让它工作守则： <!DOCTYPE html> <html> <head> <style> body { margin: 0; } .chart { position: absolute; left: 0; top: 0; width: 50%; height: 100%; } </

当我调整窗口太小时，图像会从页面左侧滑出。甚至无法滚动到它。如何防止图像从页面上滑落？问题是绝对的div，但我不知道没有它们如何让它工作

守则：

<!DOCTYPE html>
<html>
<head>

<style>

body {
  margin: 0;
}
.chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

</style>

</head>
<body>

<div class="chart">
  <img src="Resources/chart.png" width="432" height="256" style="display: block; position: absolute; top: 50%; margin-top: -128px; right: 0;"/>
</div>

</body>

</html>


身体{
保证金：0；
}
.图表{
位置：绝对位置；
左：0；
排名：0；
宽度：50%；
身高：100%；
}

1:>http://www.freeimagehosting.net/uploads/th.11b1fcb689.png

将其放置在以下位置：

.chart {position: relative; }

位置：绝对位置将其从文档流中删除，因此不会使用滚动条对其进行说明<代码>位置：相对将元素保留在流中，因此您仍然可以滚动到它
编辑
针对Michael的评论：
我希望它垂直居中。相对定位是否可行
是的。它涉及到一个小把戏，但我使用的是FF3.0.11/Ubuntu8.04，所以奇怪之处可能取决于平台
首先定义定位图元的左上角：
.chart {position: relative;
        width: 50%;
        left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
        margin: 25% 0 0 -25%;
}

要解释利润率：
我最初尝试使用与position:absolute相同的定位（顶部：50%；左侧：50%；
），但这不起作用。我不知道确切的原因，尽管我怀疑这与百分比的高度是如何计算的有关。尽管如此，反复试验（这也是我在上面提到我的浏览器/平台的原因）发现25%的人似乎将原点（图表的左上角）放在了正确的位置
25%代表了我对垂直中心的最佳猜测。-25%更容易理解，通常是“水平中心减去元素宽度的一半”。虽然你可能更容易使用width:50%；保证金：0自动以实现相同的目标
我不明白为什么使用通常的top:50%
定位不起作用，但我使用的是css重置样式表（特别是Eric Meyer的“重置重新加载”样式表，可在此处找到：）
值得注意的是，该页面与Midori中的Firefox一致（我认为它使用Webkit渲染引擎），我将很快上传演示页面（到：），以供公众对差异的嘲笑评论
还有，如果有人能帮忙解释一下为什么必须用边距垂直放置，而不是top:xx
，我会很感激的。
我希望它垂直居中。在滚动页面上进行相对定位是否可行？还是一页？@Eric:对不起，什么。。？O.O