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

【问题标题】：Horizontally center wide images in container, crop left/right if necessary在容器中水平居中宽图像，必要时向左/向右裁剪
【发布时间】：2015-01-11 18:05:23
【问题描述】：

我在一个容器中有几个图像，我希望在调整浏览器大小时图像水平居中。目前，图像与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

【问题讨论】：

你能把这个放在钢笔或小提琴里吗？\
这样吗？ jsfiddle.net/fs52sp8j
margin 0 不会将图像放在 left:0 。您是否希望图像占据整个视口宽度并将它们从视口的左上方定位？
我没说margin 0 auto 会把图片放在左边。我说当我调整浏览器大小时它们就像left:0。我希望它们像我发布的图片一样居中。
小提琴已添加。当您缩小浏览器图像的大小时，图像将保持在左侧：0。

标签： html css jquery-cycle2

【解决方案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

【讨论】：

参见 jsfiddle.net/salman/Ljnzr2uu/3 (i) 循环插件在图像标签上添加 left: 所以在 CSS 中添加 !important (ii) 我已经删除了拉伸以适应规则循环插件自动增长容器以适应最高的图像（iii）我根据您的要求使用了更宽的图像。

【解决方案2】：

这是给你的小提琴；我想这就是你要找的。 http://jsfiddle.net/qo625xkb/

刚刚向您的 imgs 添加了一个幻灯片类。还有……

<div class="container-fluid main-slide">
  <div class="mask"></div>
  <div class="cycle-slideshow" style="position: relative;">
  <img class="slide" src="http://placekitten.com/g/200/300" />      
  <img class="slide" src="http://placekitten.com/g/200/300"  />      
  <img class="slide" src="http://placekitten.com/g/200/300" />      
  <img class="slide" src="http://placekitten.com/g/200/300" />
</div>

对满容器采取了不同的方法，中心填充。

.main-slide{
    height:520px; 
    max-width:1920px;
    padding:0;  
    overflow:hidden;
    position: relative;
    border: 2px solid green;
}
.slide {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    margin-left: 50%;
    margin-top: 50%;
}

【讨论】：