Question

请有人可以帮助我我试图得到一个图像，它被分成6个相等的部分，以页面为中心，并且在我拼接图像的大小，然而它的出现全部被压扁，我无法找出什么我失踪了。

图像似乎是方形而不是矩形，我认为是问题，但不知道是做什么的。

感谢任何帮助！谢谢！

我添加了链接，但也被告知要添加代码 https://codepen.io/mikechristopher/pen/gMLEYx?editors=1100

HTML

<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]-->

CSS

*,
*: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);
}

Answer 1

这是宽高比的问题。您将面板的高度设置为100％，但这与宽度无关，因此不会保持比率。要查看我的意思，请从其中一个height:100%图片面板中移除.cards__back，然后显示“未压扁”。

请记住，height来自父元素的宽度。

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

图片格式不正确

1 个答案: