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

Question

我想要一列缩放到视口高度的图像，同时保持它们的纵横比。

我有一个工作演示：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

是这样的吗？

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

#projects {
  margin: 0 auto;
  text-align: center;
  width: 50%;
  
}


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

img {
  display: flex;
  width: auto;
  height: 100vh;
  max-width: 100%; 
  margin: 0px auto;
  padding-top: 100px;
 }

@media (max-width: 900px) {
  img {
    max-height: calc(100% - 0px);
    padding-top: 0px;
  }
  
  h2 {margin-bottom:0px;}
}


/* demo stylin' */

body {
  font-size: 24px;
  font-family: arial;
  font-weight: normal;

}

<section id="projects">

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


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

</section>

Answer 2

将您的显示更改为内嵌，并将您的 padding-top 更改为 margin-top。

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

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

它不能解决您的问题吗？

Answer 3

试试这个。
添加一个 class 标记 <a> 到您的 css 代码 a{display:inline-block;}.
用 max-width:300px; width:100%.
编辑 class img{} 图片将以 最大宽度 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;}

如果有效请告诉我。

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

Image list based on viewport height with proportional resizing

html

css

viewport