html - 如何防止我的图像缩小

Question

当我从左到右或从上到下缩小浏览器窗口时，图像的宽高比会发生变化。我试图为我的图像提供一个以像素为单位的高度，但这样做时，图像隐藏了我的“h3”句子。

这是我的密码笔:A tribute page - project

这是我的代码的一部分:

    header {
  height: 100%;
  width: 100%;
}

    .container-fluid {
  height: 100%;
  padding: 0;
}

 .row {
  height: 100%;
}


#image {
  display: flex;
  flex-flow: row, wrap;
  position: relative;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #ed1c24;
}

Answer 1

尝试添加到 #image 规则 object-fit: cover 但此解决方案在 IE 中不起作用。对于 IE，您需要找到一个 Polyfill。