Question

我至少得到以下内容来渲染图像，但是当窗口调整大小超过某一点时：图像的一部分被切断。

#header {
  background-image: image-url('my_header.png'); #image-url is a helper in rails
  background-repeat: no-repeat;
  height: 100px;
  background-size: 100%;
  border-radius: 1em;
}

然后展示我如何在application.html.erb中指定身体顶部的图像：

<body>
   <div id="header"></div>
</body>

我想要发生的是图像按比例缩放但不会被切断。我不想要任何特定的高度设置。我希望它能够根据需要自动缩放（但是，除非我使用px指定高度，否则我无法渲染图像。）

Answer 1

@Pangloss因提供他在评论中引用的精彩答案at this jsfiddle而值得肯定。

这是他的css：

#header {
    background-image: url('http://i.imgur.com/zOZVQaf.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 1em;
    border: 1px solid blue;
}
#header img {
    display: block;
    visibility: hidden; /*hidden but reserve the space*/
    width: 100%;
    height: auto;
}

和html：

<div id="header">
    <img src="http://i.imgur.com/zOZVQaf.jpg">
</div>

@Pangloss在评论中提供了这个答案。如果/当他发布这个问题的答案时，我会将其转换回答案。

图像未正确调整大小：调整窗口大小时图像会被切断

1 个答案: