html - 如何垂直放置图像以便它们始终填满屏幕

Question

好的，所以我有一个已经响应填充屏幕高度和宽度的网站。我想在右侧创建一个包含 5 个图像的垂直 div。我希望这 5 张图像保持原来的纵横比，但从 16:9 屏幕变为 4:3 它们不会散开以垂直或垂直填充区域。希望我能正确解释这一点。

目前图像保持原样。所以在笔记本电脑上，只有 4 个显示，第五个从页面上消失，然后当我转到 4:3 屏幕时，图像不会散开以填充底部的空白空间。

希望有人能理解我正在尝试做的事情并伸出援手。

谢谢

Answer 1

编辑回应评论:试试这个:http://codepen.io/anon/pen/LjylJ

正文，html{ 高度:100%;

.img-wrapper > img{ 高度:100px；

.img-包装器{ 宽度:10%； 高度:20%；

---

您可以在包含的 div 上使用百分比。如果您将宽度设为 100% 并允许其设置自己的高度，图像将保持宽高比。

http://codepen.io/anon/pen/sDAHF

  .img-wrapper > img{
    width:100%;
   }

 .img-wrapper{
   width:10%;
  display:inline-block;
  height:100%;
  }