将比屏幕更宽的 div 对齐到中心和隐藏溢出答案

【问题标题】：Align div wider than screen to be center & hidden overflow将比屏幕更宽的 div 对齐到中心和隐藏溢出
【发布时间】：2014-05-20 03:37:27
【问题描述】：

我想制作比显示器屏幕更宽的幻灯片。

以下代码是如果 div 小于屏幕：

HTML：

<div class="testme">
  <img src="http://placehold.it/400x300">
</div>

CSS：

html,body{
    padding:0;margin:0;
}

.testme{
    width:400px;height:300px;
    margin-left: auto;
    margin-right: auto;
}

但如果img 的宽度比显示器屏幕宽，我必须在 CSS 中删除 width 以使溢出有效。但是width 对于对齐中心很重要。

使用margin-left: -50% 对齐但不完全居中

（我知道的大多数滑块使用 html img 而不是背景，如果我希望滑块比屏幕宽，这是个问题）

【问题讨论】：

标签： html css

【解决方案1】：

不确定它是否会对您有所帮助.. 但如果您只想将图像放在 div 的中心.. 您可以将图像放在 div 的背景属性中并将其定位到中心..您不需要担心边距或任何东西..如果 div 的大小根据您查看的屏幕增加..它会重新调整到最佳状态案例中心..

.testme {
background: url('..src of image tag');
background-position:center;
}

如果您需要它来播放幻灯片.. 您可以随时动态地将背景属性添加到 div 标签并从 div 中删除图像标签。 :) 希望对你有帮助..

【讨论】：

【解决方案2】：

我会尝试：

img {
    width: 120%;
    height: auto;
    margin-left: -10%; /*half of width surplus*/
}

【讨论】：