0

我正在构建一个博客并有一个大标题图像，其目标是填充屏幕顶部（除非在大于 1500 像素的监视器上） - 但是滚动条远远超出标题内容并显示空白。

在 Ipad 上查看时，它会缩小并显示内容一侧的额外空间。为什么宽度明显大于图像？

这是网站：http ://beautyintheweeds.com/

这是HTML和CSS：

<?php wp_head(); ?>
</head>

<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp-    content/themes/journalist/images/longtop.jpg"/></div></div>

div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}

此代码用于将标题置于容器之外，我希望它始终填满屏幕顶部，除非监视器太大。任何想法为什么它会在图像之外创建额外的滚动空间？

谢谢。

4

4 回答 4

2

class="inner"它是占据空间的元素。它从其中的图像获取其大小，但随后您使用相对定位将图像显示在元素的左侧。

如果您想使用该方法使元素居中，请在所有元素周围放置一个 div，该 divoverflow: hidden;没有设置宽度，以便它使用默认值width: auto，这将使其占据所有可用宽度。

于 2012-09-04T14:09:01.507 回答
1

试试这个

#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
于 2012-09-04T14:05:25.903 回答
0

http://jsfiddle.net/pWDrD/

您将看到是否增加小提琴框的宽度，然后图像会自动增加宽度而没有任何滚动条。你明白我是怎么做到的吗？让我知道。如果不是，我会解释。简而言之，当您希望图像进入显示器的 100% 时，您需要将其放入宽度为 100% 且边距自动的容器中，而不是固定宽度且根本没有位置。

于 2012-09-04T14:10:55.917 回答
0

我会把它们从容器中拉出来。在标记中将 div.outer 移到 div.container 上方，删除 div.outer、div.inner 的所有 css，然后添加 text-align: center; 到 div.outer 并完全删除 div.inner。

于 2012-09-04T14:16:18.167 回答