0

我在正确显示此图像时遇到了一些麻烦。

我的站点设置宽度为 940 像素，我想保持这个宽度，但其中有一个更宽且溢出的 div，这样你仍然可以在更大的显示器上看到它。

<div id="cinema-wrapper">
<div id="cinema-displays"></div>
</div>


#cinema-wrapper {
width:940px; 
height:764px;
}
#cinema-displays {
background-image: url(../mackbyte_files/img/cinema-bg.png);
height: 764px;
width: 3109px;
background-repeat: no-repeat;
position: absolute;
left:50%;
margin-left:-1554.5px;
overflow:visible !important;
}

这可行（有点），但我有两个问题。

  1. 它在 safari 中不起作用（chrome/firefox 很好）
  2. 它仅在右侧留下滚动选项。（例如，我可以进一步向右滚动以查看溢出的图像）。

对于 2，我只希望用户根据他们的屏幕分辨率看到图像的数量。

PS。我知道 3109px 对于网络和屏幕分辨率来说是巨大的，但我正在努力修复，然后再继续使用图像以使其更小；但是，当我这样做时，我仍然会遇到这个问题。

4

2 回答 2

0

控制内部 div 在cinema-wrapper 外部是否可见是父级的溢出，您没有设置。所以，你应该这样做

#cinema-wrapper {
    width:940px; 
    height:764px;
    overflow:visible;
}
于 2013-02-02T19:31:21.933 回答
0

我也遇到过这种问题，所以这是我的方法。

对于 HTML：

<div id="cinema-wrapper">
    <div id="cinema-subwrapper">
        <div id="cinema-displays"></div>
    </div>
</div>

对于 CSS：

#cinema-wrapper {
    width: 940px; 
    height: 764px;
    overflow: visible;
    position: relative;
}

#cinema-subwrapper {
    display: inline-block;
    position: relative;
    right: -50%;
}

#cinema-displays {
    background: url(../mackbyte_files/img/cinema-bg.png) center top no-repeat;
    height: 764px;
    width: 3109px;
    position: absolute;
    left: -50%;
}

希望这可以帮助。:)

于 2013-06-22T00:04:59.900 回答