Html 基于视口高度并按比例调整大小的图像列表

我想要一列缩放到视口高度的图像，同时保留其纵横比

我有一个工作演示：

我的问题是链接没有环绕图像，因此HitZone太大（并且会干扰其他UI元素）。将a标记设置为显示：块包裹图像，但取消调整大小

还有别的办法吗

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

像这样的事

html，
身体，
#计划{
身高：100%；
保证金：0；
}
#计划{
保证金：0自动；
文本对齐：居中；
宽度：50%；
}
氢{
利润率：20px 0 100px 0；
字体大小：正常；
字体大小：20px；
}
img{
显示器：flex；
宽度：自动；
高度：100vh；
最大宽度：100%；
保证金：0px自动；
填充顶部：100px；
}
@介质（最大宽度：900px）{
img{
最大高度：计算（100%-0px）；
填充顶部：0px；
}
h2{页边距底部：0px；}
}
/*演示样式'*/
身体{
字体大小：24px；
字体系列：arial；
字体大小：正常；
}

项目一
项目二

将显示更改为内联显示，将填充顶部更改为边距顶部

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

它不能解决您的问题吗？

试试这个。
将类添加到标记

到css代码

a{display:inline block；}

用

最大宽度：300px编辑类
img{}
；宽度：100%

Thw图像将以最大宽度300px显示，但如果需要，将调整其大小

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

---

如果有用，请告诉我。

你所说的“链接没有环绕图像”是什么意思？在我看来，它们是。如果你将鼠标移到图像外，你仍然可以单击链接-这在大屏幕上非常明显。链接确实包裹了图像，但图像不再缩放到视口高度。确实如此，谢谢。你能解释一下为什么这样做吗？你把你的img的显示设置为块，这将元素的宽度固定为它的父元素的宽度，你添加了填充顶部而不是边距顶部，从而使图像上方的区域成为元素的一部分，而不是有一个不相关的间隙。

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