html - 在容器中水平居中宽图像，必要时向左/右裁剪

Question

我在一个容器中有几个图像，我希望在调整浏览器大小时图像水平居中。目前，图像与左边缘对齐，如 left: 0，如果容器比图像窄，我希望它们溢出左右边缘。我认为 margin: 0 auto 会起作用。但似乎并没有。基本上这就是我想要的:

HTML:

<div class="container-fluid main-slide">
  <div class="mask"></div>
  <div class="cycle-slideshow" style="position: relative;">
      <img src="/img/1.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
      <img src="/img/2.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
      <img src="/img/3.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
      <img src="/img/4.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
  </div>
</div>

CSS:

.main-slide{
    height:520px; 
    width:100%; 
    max-width:1920px;
    padding:0; 
    margin:0 auto; 
    overflow:hidden;
    position: relative;
}

FIDDLE

Answer 1

即使需要将左侧推到容器外，以下技巧也会使图像水平居中。

.cycle-slideshow {
  position: relative;
  /* for testing */
  margin: 0 auto;
  border: 10px solid #FC0;
  width: 200px;
  height: 200px;
}
.cycle-slideshow img {
  position: absolute;
  top: 0;
  /* fill vertically */
  width: auto;
  height: 100%;
  /* center horizontally */
  left: -1000px;
  right: -1000px;
  margin-left: auto;
  margin-right: auto;
  /* for testing */
  z-index: -1;
}

<div class="container-fluid main-slide">
  <div class="cycle-slideshow">
    <img src="http://dummyimage.com/800x200/000/fff">
    <img src="http://dummyimage.com/600x200/000/fff" style="display: none;">
    <img src="http://dummyimage.com/400x200/000/fff" style="display: none;">
    <img src="http://dummyimage.com/200x200/000/fff" style="display: none;">
  </div>
</div>
<!-- cycle plugin will cycle the images one by one -->

Updated Fiddle that uses cycle plugin