Rails 4图像在生产中更大

Question

我有一个在开发过程中缩放的背景图像（运行localhost）。但在生产中，图像不会随着屏幕缩放（缩小）。

.content
  overflow: hidden
  max-width: 100%
  max-height: auto
  background-image: image-url("project.jpg")
  background-attachment: fixed
  background-size: cover
  background-position: top center

我想知道它是一个heroku问题，还是我的代码搞砸了。

Answer 1

根据您使用元素的类/ ID，可能需要根据您的代码进行更改。

<强> HTML

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

<强> CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

如果问题仍未解决，请参阅此SO answer

Answer 2

在黑暗中拍摄：为什么不尝试background-size: contain;？

使用background-size: contain;将显示整个图像，并相应调整其大小以适应其父容器的宽度和/或高度，同时保持其纵横比。