Question

我有一个div height:520px;和width:100%;，其中有一个幻灯片imgs。

我希望imgs以完整div为中心。就像background-size:cover center center但img一样。

这是我的代码（尝试过几件事，但效果不好）：

<div class="container-fluid cont"  >
  <div class="cycle-slideshow">
      <img src="/img/1.jpg" >
      <img src="/img/2.jpg" >
      <img src="/img/3.jpg" ">
      <img src="/img/4.jpg" >
  </div>
</div>

CSS：

.cont{
height:520px; 
width:100%; 
margin:0;
padding:0; 
margin: 0 auto;
overflow:hidden;
position: relative;
}

img{
min-width:100%; 
position:absolute; 
margin:auto; 
}

Answer 1

This guide by Chris Coyer on CSS Tricks是这类事物的绝佳资源。

如果您不了解图片＆＃39;身高，你可以这样做：

.cycle-slideshow {
  position: relative;
}

.cycle-slideshow img {
  margin: 0 auto;               // – for centering them horizontally

  position: absolute;           // – relative should work as well, if the `img`s are
                                //   the only children of `.cycle-slideshow`

  top: 50%;                     // – for centering them vertically.
  transform: translateY(-50%);  // – don't forget vendor prefixes:
                                //   http://caniuse.com/#search=transform
}

中心img垂直和水平内部div溢出：隐藏

1 个答案: