0

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

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

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

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

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

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

提前谢谢了。

杰克

4

1 回答 1

1

使用 aimg而不是 a 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 等，并修改数字，以便图像准确地排列在您想要的位置。

于 2013-06-28T16:26:43.017 回答