Question

我有这个样本：

CODE CSS：

＆＃13;

.container{width:100%;background:yellow;height:100vh;}
    .top{
      width:100%;
      height: 60%;
      position:absolute;
      top:0;
      background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
      background-size:cover;
    }
    
    .left{
      width: 50%;
      height: 40%;
      position:absolute;
      bottom:0;
      background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
      background-size: 100% 100%;
    }
    
    .right{
      width: 50%;
      height: 40%;
      position:absolute;
      bottom:0;
      right:0;
      background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
      background-size: 100% 100%;
    }

＆＃13;

<div class="container">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>    
</div>

＆＃13;

问题是下面的图片（两张）应该总是正方形...如果你调整窗口大小并变成矩形。

请看下面的图片：

http://i62.tinypic.com/2nw07qe.jpg

可能所有三张图片都必须是正方形...你能告诉我如何解决这个问题吗？

提前致谢！

Answer 1

只需在auto中使用背景尺寸宽度，在100%

中使用一个尺寸

https://jsfiddle.net/jka6bh1v/1/

如果你想填补你的div，请

将width与height切换为

Answer 2

如果您想要平方图像，可以使用padding-bottom代替height。

请记住，填充也与宽度有关。

不要改变太多的风格（可能有更好的方法来解决这个问题）。例如：

.container{width:100%;background:yellow;height:100vh;}
.top{
  width:100%;
  height: 60%;
  position:absolute;
  top:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
  background-size:cover;
}

.left{
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  position:absolute;
  bottom:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}

.right{
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  position:absolute;
  bottom:0;
  right:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}

<div class="container">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>    
</div>

Answer 3

try this when your screen resize


@media (max-width:767px) {

.container{width:100%;background:yellow;height:100vh;}
.top{
  width:100%;
  height: 60%;
  position:absolute;
  top:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
  background-size:cover;
}

.left{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}

.right{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  right:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}
}

当窗口调整大小时，如何使这些图像保持正方形？

3 个答案: