将div比屏幕宽对齐为中心和隐藏溢出

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

不确定它是否对你有帮助。但是如果你只是想让图像在div的中心…你可以把图片放到div的背景属性中，并把它放在中间。你不需要担心保证金之类的。如果div根据您正在查看的屏幕大小增加…它会重新调整到最佳案例中心…

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

如果你需要它的幻灯片…你总是可以动态地添加背景属性到div标签，并从div中删除图像标签。:)

Answer 2

我会试试:

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