Question

我想在网站上展示一张大图。设计规范是显示图像的一部分，其余部分隐藏在视口外。当您将视口/浏览器拖得更宽时，您将看到更多图像。

这是测试网站：http://kazoup.airboxmedia.com/

我希望Mac的图像保持不变（文本右侧约50px），当您加宽浏览器以查看更多图像时，图像将与文本保持相同的距离。

目前它的DIV背景图像是100％。我已经尝试将其添加为IMG HTML，但是一旦我将其强制离开屏幕，我就会得到水平滚动条，我不想要这个。我也尝试在背景上使用%%，但这似乎并没有将它保留在同一个地方。

所以我希望用文本修复它，没有滚动条，并且能够在扩展浏览器时查看更多图像。

有什么想法吗？我整个下午都被困住了。

非常感谢提前。

杰克

Answer 1

使用img代替background-image。将img放在#wrapper内，然后按如下方式应用CSS。

<强> HTML：

<div id="wrapper">
    <img class="hero-img" src="static/img/macbook.png">
    <!-- etc. -->

<强> CSS：

#outerWrap2 {
    min-width: 940px; /* 940px is used because it is the width of #wrapper */
    overflow: hidden; 
}

.hero-img{
    position: absolute;
    left: 42%;
    top: 135px;
}

显然，您可以将css应用于img以及您喜欢的任何类/ ID等，并修改数字，以便图像准确排列在您想要的位置。

背景图像固定在50％右侧，部分隐藏在视口下，并在视口展开时可见

1 个答案: