html - 如果页面的特定宽度防止图像改变纵横比

Question

我对此还是有点菜鸟，如果这很明显，我很抱歉。我正在尝试制作模糊的背景图像标题，但在减小浏览器宽度时遇到问题。从this code pen可以看出，当屏幕宽度太小时，图像将开始扭曲。如果您去掉最小高度线，宽高比保持正确，但图像会调整大小并且变得对于页眉容器来说太小。

这是我的代码:

<div class="image-header">
        <img id="blurred-header-bg" src="http://image.tmdb.org/t/p/w500/eIOTsGg9FCVrBc4r2nXaV61JF4F.jpg"/>
</div>

风格

.image-header {
  position: relative;
  width: 100%;
  height: 400px;
  margin-top: -20px;
  overflow: hidden; 
}
  #blurred-header-bg {
    width: 100%;
    min-height: 800px;
    margin-top: -25%;
    -webkit-filter: blur(15px);
    -webkit-transform: translate3d(0, 0, 0);
  }

非常感谢

编辑 - 我已经按照建议更改了最小宽度，但现在无法将图像居中。建议提供任何帮助。 (已尝试使其显示为 block 和父文本对齐居中无济于事)

edit2 - 由于 this answer 解决了居中问题

Answer 1

只需将 width: 100%; 更改为 min-width: 100%; 图像不会扭曲但仍会填充该区域。