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);
  }

非常感谢

编辑 - 我已根据建议更改了最小宽度，但现在无法使图像居中。建议任何帮助。（尝试将其显示为块和父文本 - 对齐到中心无效）

edit2 - 感谢this answer

解决了居中问题

Answer 1

只需将width: 100%;更改为min-width: 100%;，图片就不会失真，但仍会填满该区域。

如果页面的某个宽度，则防止图像改变宽高比

1 个答案: