将div宽于屏幕对齐为中心＆amp;隐藏溢出

Question

我想制作比监视器屏幕宽的幻灯片。

以下代码是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而不是背景，如果我想让滑块宽于屏幕，则会出现问题。

Answer 1

我会尝试：

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

Answer 2

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

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

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