Html，Css 似乎无法让它工作

Question

我一直在研究固定高度的全宽(图像在悬停“溢出隐藏”时展开)

不确定我做错了什么，我似乎无法连接@media，而且我遇到了第 6 张图片加载方向错误的问题。

希望有人能指出我正确的方向。

#items {
  width:300px; 
  display: inline;
}

.itemHolder {
  float:left; 
  width:16.6%;  
  height:600px; 
  overflow:hidden; 
  position:relative;
}

.item {
  position:center; 
  top:0; 
  left:0; 
  z-index:1; 
  width:100%; 
  background:#FFF;
  position: relative;
}
.itemHolder:hover {
  overflow:visible;
  position:center;
}
.itemHolder:hover .item {
  z-index:2;
}
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

<div class="col- col-12">
<div id="items">
  <div class="itemHolder">
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071" alt="">
    </div>
  </div>
  <div class="itemHolder">
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077" alt="">
    </div>
  </div>
  <div class="itemHolder">
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt="">
    </div>
  </div>
  <div class="itemHolder">
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087" alt="">
    </div>
  </div>
  <div class="itemHolder">
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt="">
    </div>
  </div>
  <div class="itemHolder">
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029084/image5.jpg?1489029084" alt="">
    </div>
  </div>
 </div>
</div>

Answer 1

这应该可以解决问题并在所有浏览器上更好地工作。

.items {
  min-height: 600px;
  overflow: hidden;
  display: flex;
}

.item {
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
  align-items: center;
  transition: flex 0.7s;
  background-size: cover;
  background-position: center;
  flex: 1;
  justify-content: center;
}

.item1 {
  background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071);
}

.item2 {
  background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077);
}

.item3 {
  background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081);
}

.item4 {
  background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087);
}

.item5 {
  background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081);
}


/* Flex Items */

.item>* {
  flex: 1 0 auto;
}

.item:hover {
  flex: 4;
}

<div class="items">
  <div class="item item1">

  </div>
  <div class="item item2">

  </div>
  <div class="item item3">

  </div>
  <div class="item item4">
  </div>
  <div class="item item5">

  </div>
</div>