html - 图片格式不正确

标签 html css

有人能帮我吗 我正在尝试将图像分成 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);
}

最佳答案

这是纵横比的问题。您将面板的高度设置为 100%，但这与宽度无关，因此不会保持该比例。要明白我的意思，请从 .cards__back 图像面板之一中删除 height:100%，它会“未被压扁”。

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

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

关于html - 图片格式不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37990551/

上一篇：html - 无法正确显示某些元素

下一篇：javascript - 如何使用 es6 语法导入 ReactCSSTransitionGroup？

相关文章：

html - 在水平行中放置导航菜单

javascript - 如何使 Bootstrap 日期选择器中的容器附加到特定元素？

html - 内联 block 与 block : why does adding a "border" change inner height?

html - 右横幅边距 CSS

jquery - 鼠标悬停以暂停图像幻灯片

html - 检查我的 CSS。随机边距

javascript - 带有列的动态 ngTable 不显示列标题

javascript - 如何通过 Javascript 将 div 中的某些 HTML 代码替换为另一个新的 HTML 代码

CSS 表格在某些浏览器上正在调整大小

html - Bootstrap : How to place button next to input-group

©2024 IT工具网  联系我们