Html 图像格式不正确

请有人能帮我吗？我正在尝试得到一个图像，它被分成6个相等的部分，在页面中居中，大小与我拼接的图像相同，但是它出来时被压扁了，我无法找出我遗漏了什么

这些图像看起来是方形的，而不是矩形的，我认为这是问题所在，但不知道是什么在起作用

谢谢你的帮助！谢谢

我已经添加了链接，但也被告知添加代码

HTML

---

这是一个纵横比的问题。将嵌板的高度设置为100%，但这与宽度无关，因此不会保持该比率。要了解我的意思，请将

高度：100%

从其中一个

.cards\uu back

图像面板中移除，它会显示为“未压扁”

请记住，

height

来自父元素的宽度

---

那么，如何保持高宽比呢？有很多方法我没有时间讨论，需要编辑您的标记，但是，您可以将面板的高度设置为零，然后将填充底部设置为高度的某个百分比，直到您得到所需的高度。

谢谢您回到我这里-我理解您关于高度的观点，并且最初确实忽略了它，但是，我的顶部和底部之间留有空白，无法确定如何拉动他们在一起。当我使用不同大小和正方形的图像时，它工作正常，但它不喜欢这些矩形图像：）

<ul class="cards">
  <li class="cards__axis">
    <figure class="cards__front">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-0.jpeg" alt="" />

    </figure>
    <figure class="cards__back">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-0.jpeg" alt="" />
      <figcaption class="cards__description--back">
        <p>ABOUT</p>
      </figcaption>
    </figure>
  </li>
  <li class="cards__axis">
    <figure class="cards__front">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-1.jpeg" alt="" />

    </figure>
    <figure class="cards__back">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-1.jpeg" alt="" />
      <figcaption class="cards__description--back">
        <p>PORTFOLIO</p>
      </figcaption>
    </figure>
  </li>
  <li class="cards__axis">
    <figure class="cards__front">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-2.jpeg" alt="" />

    </figure>
    <figure class="cards__back">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/0-2.jpeg" alt="" />
      <figcaption class="cards__description--back">
        <p>CONTACT</p>
      </figcaption>
    </figure>
  </li>
</ul>
<ul class="cards">
  <li class="cards__axis">
    <figure class="cards__front">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-0.jpeg" alt="" />

    </figure>
    <figure class="cards__back">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-0.jpeg" alt="" />
      <figcaption class="cards__description--back">
        <p>LINK</p>
      </figcaption>
    </figure>
  </li>
  <li class="cards__axis">
    <figure class="cards__front">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-1.jpeg" alt="" />

    </figure>
    <figure class="cards__back">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-1.jpeg" alt="" />
      <figcaption class="cards__description--back">
        <p>LINK</p>
      </figcaption>
    </figure>
  </li>
  <li class="cards__axis">
    <figure class="cards__front">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-2.jpeg" alt="" />

    </figure>
    <figure class="cards__back">
      <img src="https://raw.githubusercontent.com/mikechristopher/mikechristopher.github.io/master/images/1-2.jpeg" alt="" />
      <figcaption class="cards__description--back">
        <p>LINK</p>
      </figcaption>
    </figure>
  </li>
</ul>


<!--[if lt IE 10]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
  $('.cards__back').hide();
  $('.cards__axis').mouseenter(function() {
    $(this).find('.cards__back').fadeToggle();
  }).mouseleave(function() {
    $(this).find('.cards__back').fadeToggle();
  });
})();
</script>
<![endif]-->

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #333;
  font-family: 'Georgia', sans-serif;
}

.cards * {
  width: 100%;
  height: 100%;
}

.cards__axis {
  position: relative;
}

.cards__axis:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.cards__front,
.cards__back {
  position: absolute;
  top: 0;
  margin: 0;
  -webkit-transition: 0.9s ease-in-out;
  -moz-transition: 0.9s ease-in-out;
  -ms-transition: 0.9s ease-in-out;
  -o-transition: 0.9s ease-in-out;
  transition: 0.9s ease-in-out;
}

.cards__front {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: perspective(1000px) rotateY(0deg);
  -moz-transform: perspective(1000px) rotateY(0deg);
  -ms-transform: perspective(1000px) rotateY(0deg);
  -o-transform: perspective(1000px) rotateY(0deg);
  transform: perspective(1000px) rotateY(0deg);
}

.cards__axis:hover .cards__front {
  -webkit-transform: perspective(1000px) rotateY(-180deg);
  -moz-transform: perspective(1000px) rotateY(-180deg);
  -ms-transform: perspective(1000px) rotateY(-180deg);
  -o-transform: perspective(1000px) rotateY(-180deg);
  transform: perspective(1000px) rotateY(-180deg);
}

.cards__back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: perspective(1000px) rotateY(180deg);
  -moz-transform: perspective(1000px) rotateY(180deg);
  -ms-transform: perspective(1000px) rotateY(180deg);
  -o-transform: perspective(1000px) rotateY(180deg);
  transform: perspective(1000px) rotateY(180deg);
}

.cards__axis:hover .cards__back {
  -webkit-transform: perspective(1000px) rotateY(0);
  -moz-transform: perspective(1000px) rotateY(0);
  -ms-transform: perspective(1000px) rotateY(0);
  -o-transform: perspective(1000px) rotateY(0);
  transform: perspective(1000px) rotateY(0);
}


/* CUSTOM STYLES FOR THIS UNORDERED LIST */

.cards {
  width: 85%;
  margin: 0 15%;
}

.cards {
  list-style-type: none;
  padding-left: none;
}

.cards:after {
  content: "";
  display: table;
  clear: both;
}

.cards__axis {
  float: left;
  width: 20%;
}

.cards__description--back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 98%;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.7);
}

.cards__description--back p {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -1em;
  text-align: center;
  font-size: 2em;
  font-family: 'Impact', sans-serif;
  color: #880000;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}