使照片覆盖整个区域为六边形

时间：2017-05-12 23:49:44

标签： html css css3 flexbox css-shapes

我在六边形响应网格中有一个垂直图像，我想把它炸掉，这样图像在左右两侧都没有空间（在我的代码中显示）。

如果有人可以帮我这个，那就太好了，因为我一直在尝试在我的网格中使用垂直和水平图像以及在拍摄垂直图像时遇到麻烦，有问题让它填补整个六边形而没有间隙在每一边。

＆＃13;
＆＃13; 
#grid {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 2% auto;
  overflow: hidden;
  font-size: 15px;
  list-style-type: none;
}

.hexagon {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
}

.hexagon::after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
}

.inside {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.inside * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
}

.link {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  background: gray;
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexagon img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}

.inner-content {
  top: 49%;
  left: 49%;
  transform: translate(-49%, -49%);
}

.hexagon h1,
.hexagon p {
  position: relative;
  white-space: normal;
  color: white;
}

.hexagon h1 {
  font-size: 1.4em;
  color: white;
  text-shadow: 2px 2px #000;
}

.hexagon h1::after {
  position: relative;
  left: 45%;
  width: 10%;
  text-align: center;
}


/* sizing and row indents */

@media (min-width:1201px) {
  #grid {
    padding-bottom: 4.4%
  }
  .hexagon {
    width: 20%;
  }
  .hexagon:nth-child(9n+6) {
    margin-left: 10%;
  }
}

@media (max-width: 1200px) and (min-width:901px) {
  #grid {
    padding-bottom: 5.5%
  }
  .hexagon {
    width: 25%;
  }
  .hexagon:nth-child(7n+5) {
    margin-left: 12.5%;
  }
}

@media (max-width: 900px) and (min-width:601px) {
  #grid {
    padding-bottom: 7.4%
  }
  .hexagon {
    width: 33.333%;
  }
  .hexagon:nth-child(5n+4) {
    margin-left: 16.666%;
  }
}

@media (max-width: 600px) {
  #grid {
    padding-bottom: 11.2%
  }
  .hexagon {
    width: 50%;
  }
  .hexagon:nth-child(3n+3) {
    margin-left: 25%;
  }
}

@media (max-width: 400px) {
  #grid {
    font-size: 13px;
  }
}
＆＃13; 
<ul id="grid">

  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>

</ul>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

而不是提供图片width: auto和height: 100% ... 

.hexagon img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  transform: rotate3d(0,0,0,0deg);
}

反过来，width: 100%和height: auto ... 

.hexagon img {
  left: -100%;
  right: -100%;
  width: 100%;  /* adjustment */
  height: auto; /* adjustment */
  margin: 0 auto;
  transform: rotate3d(0,0,0,0deg);
}

＆＃13;
＆＃13; 
#grid {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 2% auto;
  overflow: hidden;
  font-size: 15px;
  list-style-type: none;
}

.hexagon {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
}

.hexagon::after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
}

.inside {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.inside * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
}

.link {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  background: gray;
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexagon img {
  left: -100%;
  right: -100%;
  width: 100%; /* adjustment */
  height: auto; /* adjustment */
  margin: 0 auto;
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}

.inner-content {
  top: 49%;
  left: 49%;
  transform: translate(-49%, -49%);
}

.hexagon h1,
.hexagon p {
  position: relative;
  white-space: normal;
  color: white;
}

.hexagon h1 {
  font-size: 1.4em;
  color: white;
  text-shadow: 2px 2px #000;
}

.hexagon h1::after {
  position: relative;
  left: 45%;
  width: 10%;
  text-align: center;
}


/* sizing and row indents */

@media (min-width:1201px) {
  #grid {
    padding-bottom: 4.4%
  }
  .hexagon {
    width: 20%;
  }
  .hexagon:nth-child(9n+6) {
    margin-left: 10%;
  }
}

@media (max-width: 1200px) and (min-width:901px) {
  #grid {
    padding-bottom: 5.5%
  }
  .hexagon {
    width: 25%;
  }
  .hexagon:nth-child(7n+5) {
    margin-left: 12.5%;
  }
}

@media (max-width: 900px) and (min-width:601px) {
  #grid {
    padding-bottom: 7.4%
  }
  .hexagon {
    width: 33.333%;
  }
  .hexagon:nth-child(5n+4) {
    margin-left: 16.666%;
  }
}

@media (max-width: 600px) {
  #grid {
    padding-bottom: 11.2%
  }
  .hexagon {
    width: 50%;
  }
  .hexagon:nth-child(3n+3) {
    margin-left: 25%;
  }
}

@media (max-width: 400px) {
  #grid {
    font-size: 13px;
  }
}
＆＃13; 
<ul id="grid">

  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>
  <li class="hexagon">
    <div class="inside">
      <a class="link" href="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flatiron_Building_3618433845_5745ebc1b9.jpg/220px-Flatiron_Building_3618433845_5745ebc1b9.jpg" alt="" />
        <div class="inner-content">
          <h1>title</h1>
        </div>
      </a>
    </div>
  </li>

</ul>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题