css - 背景图像固定在右侧 50%，部分隐藏在视口(viewport)下，当视口(viewport)展开时可见

Question

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

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

我希望 Mac 的图像保持原样(文本右侧约 50 像素)，并且当您扩大浏览器以查看更多图像时，图像将与文本保持相同的距离。

目前它是 100% 的 DIV 背景图像。我曾尝试将它添加为 IMG HTML，但一旦我将其强制离开屏幕，我就会看到水平滚动条，我不希望这样。我也试过在背景上使用 % % 但这似乎并没有把它放在同一个地方。

所以我希望它固定在文本中，没有滚动条，并且能够在您扩大浏览器时查看更多图像。

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

非常感谢。

jack

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 等，并修改图形，使图像准确地排列在您想要的位置。