Question

我有一些简单的问题，我无法解决。我有以下HTML代码

<body background='/freewifilogo.png'>
      <div align="center">
           <img src='/welcome.png' />
      </div>
</body>

我希望背景图片的高度和宽度达到50％，直到图片达到300 * 300像素的大小。然后我希望它停止缩放。

我一直在问谷歌而我找不到任何问题的答案。

Answer 1

我不知道你想要什么，但看看这个解决方案：

<body>
  <div align="center">
       <img src='http://www.getfilecloud.com/blog/wp-content/uploads/2014/01/building-blocks.jpg' />
  </div>
</body>

body {
background: url('http://ahdimages.com/wp-content/uploads/2014/03/background-pictures-6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}

img {
margin-top: 10%;
}

@media (max-width: 300px) {
  body {
background: url('http://ahdimages.com/wp-content/uploads/2014/03/background-pictures-6.jpg') no-repeat 50%;
}

}

http://jsfiddle.net/r0qz2xep/

Answer 2

如果您想独立于页面大小管理背景图像的大小，则需要将其放在自己的容器中。

例如：

<div class="container">
    <div class="bkg"></div>
    <div class="welcome">
      <img src='/welcome.png' />
    </div>
</div>

然后您可以使用CSS：

.bkg {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
    padding-bottom: 100%;
    background: url(/freewifilogo.png) 0 0 no-repeat;
    z-index: -1;
}

position: absolute;将其从内容流中取出，因此不会影响欢迎图片。

例如，请参阅this Fiddle.我没有受欢迎的图片，因此我在示例中将其替换为标题。

缩放背景图像

2 个答案: