Question

一个新手问题，到目前为止找不到答案。

我的页面是2列网格系统，以下是右栏

   <div class="col-xs-12 col-sm-9 col-lg-9" ng-style="{'background-
image':'url(123.jpg)', 'background-repeat': 'no-repeat', 'height':'
800px' }">
      <h1> {{message}} </h1>
            <div ng-view></div>
   </div>

现在高度已经固定，我试图让图像自动调整浏览器大小（对于页面中的右列部分），但它不起作用。

有任何提示吗？

Answer 1

您可以在样式列表中使用“background-size”属性来提及“background-image”的宽度和高度。您的代码应如下所示：

header('Content-Type: application/json');

Answer 2

将 background-size：cover; 添加到您的风格

将其更改为

<div class="col-xs-12 col-sm-9 col-lg-9" ng-style="{'background-image':'url(123.jpg)', 'background-repeat': 'no-repeat', 'background-size': 'cover'; }">
  <h1> {{message}} </h1>
        <div ng-view></div>   </div>

希望有所帮助

Answer 3

你需要在CSS中处理这个问题，推荐的 background-size：样式是封面，因为它使用CSS实现将图像缩放到容器中。

但是，你应该尝试其他的，看看它们是否更适合你

http://www.w3schools.com/cssref/css3_pr_background-size.asp

也可能是更好的练习，因为您使用引导程序来使用类img-responsive，引导程序具有自己的内置类，并且它根据{适当地缩放图像{1}}它在。

如何以ng风格自动调整背景图像

3 个答案: