Question

我的网页宽度为960像素。在这个页面里面有一个带有图像的部分，我希望它一直向右推，所以它在页面的一半。下面的附图将向您展示我想要的样子。

如果图像在背景中，我也会喜欢它，所以如果浏览器窗口的宽度很小，它只会覆盖图像。

这里有几个网站：

http://cpanel.com/products/

在cpanel上，当浏览器窗口小于图像时，您可以看到该页面上的iPad只显示了一半。

另一个有此效果的网站是Doteasy.com，这里是URL：

http://www.doteasy.com/

如果向下滚动到其页面中间，您将看到“网站构建器”部分，其中包含该软件的屏幕截图。他们的页面宽度为980px，您可以看到屏幕截图位于页面包装器的中间位置。

图像应为552px widde 315px高。

.container {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background-color: yellow;
}

section {
    width: 100%;
    height: 508px;
    background-color: blue;
}

.image {
    width: 552px;
    height: 315px;
    background-color: red;
}

<!DOCTYPE html>
<html>
<head>
    <title>Site Example</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>
    <section>
      <h1>This is the Section</h1>
        <div class="container">
            <div class="image">This would be the image.</div>
        </div>
    </section>

</body>
</html>

我希望你们能帮忙！

感谢。

Answer 1

您可以完全相对于容器定位，如下所示：

将position: relative;添加到容器
为图像添加绝对定位position: absolute; top: 0; right: -276px;（右图值是图像宽度的一半）
overflow-x: hidden将阻止图像的额外一半被显示。

＆＃13;

section {
    width: 100%;
    height: 508px;
    background-color: blue;
}

.container {
    position: relative;
    width: 960px;
    height: 400px;
    margin: 0 auto;
    background-color: green;
    overflow-x: hidden;
}

.image {
    position: absolute;
    top: 0;
    right: -276px;
    width: 552px;
    height: 315px;
    background-color: red;
}

＆＃13;

<section>
  <h1>This is the Section</h1>
  <div class="container">
    This is the container
    <div class="image">This would be the image.</div>
  </div>
</section>

＆＃13;

Answer 2

这对你有用。我将position: relative添加到.container和部分，然后position: absolute添加到图像容器。然后，您可以使用left: 25%调整您希望图像离屏幕的距离。 25％可根据您的需求进行调整。如果能够更好地满足您的需求，您还可以使用px而不是百分比。

.container {
    width: 960px;
    height: auto;
    margin: 0 auto;
    position: relative;
}

section {
    width: 100%;
    height: 508px;
    background-color: blue;
    position: relative;
}

.image {
    width: 552px;
    height: 315px;
    background-color: red;
    position: absolute;
    left: -25%; /* -- Adjust this percentage as needed -- */
}

<!DOCTYPE html>
<html>
<head>
    <title>Site Example</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>
    <section>
      <h1>This is the Section</h1>
        <div class="container">
            <div class="image">This would be the image.</div>
        </div>
    </section>

</body>
</html>

在页面容器

2 个答案: