试图制作一个仅限 css3 的画廊。惨败答案

【问题标题】：Trying to make a css3-only gallery. Failing miserably试图制作一个仅限 css3 的画廊。惨败
【发布时间】：2015-05-15 16:07:35
【问题描述】：

我正在尝试仅使用 css3 从头开始制作图片库...这就是我目前所拥有的。

Here's an imgur album of my main three problems.

最大的问题是我使用 position: relative 以便我可以将图像标题与底部对齐。这会导致我的图像在单击图像后重新定位。
第一张图片超出了大约 5 个像素的边距。我使用 Chrome 的 Inspect Element 工具对其进行了检查，但没有理由这样做。
在 codepen（和此处）中，图像超长。我怀疑这不是一个真正的问题，但与我的屏幕截图相比，它看起来有点不稳定。

我在 safari 和 chrome 中对其进行了测试，这些问题在两种浏览器中都存在（3 号除外）。这是我正在进行的代码：

body {
  background: #eee;
  font: 400 14px/20px'PT Serif', serif;
  color: #2b2e2e;
  margin: 0;
  padding: 0;
}
article {
  width: 80%;
  margin: 0 auto;
}
nav,
img,
header,
figure {
  display: inline-block;
  margin: 0;
  padding: 0;
}
header {
  width: 30%;
  margin-right: 3%;
}
nav ul li {
  font: 12px/16px normal'Raleway', sans-serif;
  letter-spacing: 2px;
  display: block;
  margin: 2px 0;
  vertical-align: top;
}
date {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  display: block;
  font-size: 12px;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}
h1 {
  font: 700 36px/40px'PT Sans Narrow', sans-serif;
  text-transform: uppercase;
  padding: 0 1em;
}
header {
  background: #fff;
  height: 80%;
  margin-bottom: 3%;
}
p {
  margin: 16px 0 20px 0;
}
ul,
ol {
  margin-bottom: 20px;
}
div {
  margin: 0;
  padding: 0;
  display: inline-block;
}
img {
  width: auto;
  height: 200%;
  margin: 0 auto;
}
figure {
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 30%;
  height: 30%;
  margin: 0 3% 3% 0;
}
figcaption {
  background: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .25em 1em;
}
figure:first-of-type {
  width: 63%;
  height: 80%;
  margin-bottom: 3%;
}
figure:focus {
  width: 80%;
  height: 80%;
  transition: all 1s ease-out .5ms;
  -webkit-transition: all 1s ease-out .5ms;
  -moz-transition: all 1s ease-out .5ms;
  -o-transition: all 1s ease-out .5ms;
  position: absolute;
  top: 0;
  left: 10%;
  text-align: center;
  z-index: 1000;
  outline: none;
}

<html>

<head>
  <title>Sample Article</title>
  <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

</head>

<body>

  <article>
    <header>
      <nav>
        <ul>

          <li><a href="">Top</a>
            <ul>
              <li>Sub</li>
            </ul>
          </li>
          <li><a href="">Menu</a>
            <ul>
              <li>Links</li>
              <li>Go</li>
              <li>Here</li>
            </ul>
          </li>
          <li><a href="">Links</a>
            <ul>
              <li>And</li>
              <li>Here</li>
            </ul>
          </li>

        </ul>

      </nav>

      <h1>Example Article Title</h1>
    </header>
    <figure tabindex=1>

      <img src="http://i.imgur.com/JdRTuQB.jpg" />
      <figcaption>Text goes here. Obviously there'll be more. Like this.</figcaption>

    </figure>
    <figure tabindex=2>

      <img src="http://i.imgur.com/4PkhPlq.jpg" />
      <figcaption>Text goes here too</figcaption>

    </figure>
    <figure tabindex=3>

      <img src="http://i.imgur.com/kTcyEOe.jpg" />
      <figcaption>Some more captions</figcaption>

    </figure>
    <figure tabindex=4>

      <img src="http://i.imgur.com/mIeUOYX.jpg" />
      <figcaption>Almost done! Hehehe</figcaption>

    </figure>

  </article>
</body>

</html>

http://codepen.io/anon/pen/EadOyL?editors=110

【问题讨论】：

很酷的画廊，你需要什么帮助来去除底部的填充物？
谢谢！ :) 问题是，一旦您单击放大图像，图像就会四处移动。单击代码笔中的任何图像以获取示例。还有一个恼人的边距（在 imgur 上的第一张图片中），我不知道如何摆脱。

标签： html css gallery pseudo-class

【解决方案1】：

问题

页眉和第一个数字之间有奇怪的边距
当你使用inline-block并且不添加浮动方向时似乎会出现。
修复：float:left;

图像过长或图像过长
这是由您设置造成的：您的身材为 30%，而孩子的 img 为身高 100%。
这意味着有图像被强制以各种方式充满，并且您将宽度设置为自动。这导致图像很长。我的建议是简单地设置一个较小的固定高度，以便显示更多的图像宽度。我使用了 90vh，因为它使用视口测量，它在移动设备上的缩放效果很好。

点击图片时图片乱序
首先，不错的技巧。 :focus 现在不是真的点击了吗？聚焦元素是选择当前元素。选择它的方式是单击。现在，由于您在元素上使用 positon relative 和 position absolute 元素不会占用任何空间，因为这是 position absolute 所做的。
tl;dr : ...
我添加了一个具有类fig-container 的div 是相对定位的，并且具有与图相同的高度和宽度。并在:focus 上添加了不同的效果，我将绝对定位元素（图形）设置为顶部为 50%，左侧为 50%，使图形的左上角始终位于视口的中心。并添加了 -50% x 和 -50% y transform: transition(-50%, -50%); 的变换平移，这会将其移动到自身的中心。换句话说：居中该元素。

我希望您为我编写代码：
好的，这里是 codepen

【讨论】：

很难相信答案基本上是在每个
中添加一个
。去搞清楚。呵呵，谢谢你的朋友！这是最简单的解决方案。