html - 基于视口(viewport)高度并按比例调整大小的图像列表

Question

我想要一列图像可以缩放到视口(viewport)高度，同时保留其纵横比。

我有一个工作演示:https://codepen.io/garethj/pen/qrjjvp

我遇到的问题是链接没有环绕图像，因此命中区域太大(并且会干扰其他 UI 元素)。将 a 标签设置为 display:block 包裹图像，但会终止调整大小。

还有其他方法可以解决这个问题吗？

<section id="projects">

<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project one</h2>


<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project two</h2>

</section>

CSS:

 html,
body,
#projects {
  height: 100%;
  margin: 0;
}

#projects {
  margin: auto 5%;
  text-align: center;

}

h2 {
  margin: 20px 0 100px 0;
  font-weight: normal;
  font-size: 20px;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 200px);
  margin: 0px auto;
  padding-top: 100px;
}

https://codepen.io/garethj/pen/qrjjvp

Answer 1

将显示更改为内联，并将 padding-top 更改为 margin-top。

img {
  display: inline;
  margin-top: 100px;
}

https://codepen.io/anon/pen/MpEdzV

这不能解决您的问题吗？