Question

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

这是我的代码的一部分：

    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。

Answer 2

更新了我的回答：Codepen

相关代码：

static public

当您将图像作为header { height: 100%; width: 100%; background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Red_Hot_Chili_Peppers_2012-07-02_001.jpg); background-size: cover; border-bottom: 1px solid #ed1c24; }标记放入HTML中时，您将会遇到调整大小的一些问题。修复是将图像用作<img>，就像我上面所做的那样。

查看here示例。

调整窗口大小时，会在background-image和标题底部之间添加一些空格。

如何防止我的图像缩小

2 个答案: