Question

基本上我有一个页脚图像是什么是浏览器宽度，当我减小浏览器宽度时，它开始从右侧裁剪。

我想要的是保持两侧的中心和裁剪？

<footer class="site-footer">
  <img class="footer-bg" src="assets/img/footer-bg.png" alt="">
</footer>

.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
}
.site-footer .footer-bg {
   /* Set rules to fill background */
   min-height: 100%;
   min-width: 1024px;
   /* Set up proportionate scaling */
   width: 100%;
   height: auto;
  background-position: no-repeat fixed center top;
 }

Answer 1

我们可以用background-image属性来实现这一点。

http://codepen.io/asim-coder/pen/YywaeB

HTML：

PUT /load/load/_mapping { "load": {
    "properties": {    
        "customerReferenceNumbers": {
            "type": "string",
            "index": "analyzed"
           }
    }
}}

CSS：

<footer class="site-footer">
</footer>

Answer 2

 .site-footer .footer-bg {
   min-height: 100%;
   min-width: 1024px;
   width: 100%;
   height: auto;
   background-position: no-repeat fixed center top;
   margin-left:auto;
   margin-right:auto;
  }

OR

您应该使用背景图像进行设置。

这样您就可以轻松地将其集中在一起：

body{
 background: url("path/to/image") no-repeat fixed center top; 
 }

Answer 3

你可以做这样的事情（如果你需要<img>标签，否则使用背景）：

.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
}
.site-footer .footer-bg {
   min-height: 100%;
   min-width: 1024px;
   width: auto;
   height: 100%;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%); /** for iOS **/
 }

Answer 4

有两种解决方案：

使用CSS background-image而不是<img>元素设置另一种设置页脚背景的方法。重要的是，如果position:absolute，您需要设置width的{{1}}和height：

＆＃13;

<footer>

＆＃13;

如果您仍然需要/必须使用<footer class="site-footer"></footer> .site-footer { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; overflow: hidden; width: ?? ; height: ??; background:url(assets/img/footer-bg.png) 0 0 no-repeat); background-size:100%; }元素，请尝试以下代码（仍然需要设置<img>和<footer> hight并向左浮动img。）

＆＃13;

width

＆＃13;

从两侧拍摄图像并保持居中

4 个答案: