Question

我已在我的background-image之一上应用了集<div>，其中包含以下属性：

.mydiv-left {
     background: url(path to image) no-repeat center center fixed;
     height:auto; // also tried with 100%
     background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}

此结果无图像显示，但当我将高度设置为此图像时，会切断图像。由于图像具有高分辨率，我希望它能够放在我div的较小区域，而不需要删除任何部分/信息。

请记住，背景图像是动态的，并且会继续更改循环中的其他div。

Answer 1

试试这个

CSS

.mydiv-left {
    background-image: url(path to image);
    height:(in px);
    width: (in px);
    background-size: 100% 100%;
    background-repeat: no repeat;
    background-position: center center;     
}

如果您发布整个代码，很容易找到解决方案。

Answer 2

没有内容/高度的

<div>将导致0高度。我猜这就是为什么你看不到你的形象。
给你<div>一个大小，background-size应该做它的工作。

http://jsfiddle.net/LsdDE/

.d1, .d2 {
    border: 1px solid grey;
    width: 200px;
    height: 200px;
    background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}

.d1 {
    background-size: auto 200px;
}

.d2 {
    background-size: 200px auto;
}

Answer 3

最简单的建议是将min-height提供给您的div（以像素为单位） DEMO，保持标记相同，下面是CSS。

<强> CSS

 .mydiv-left {
    background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
    color : #FFF;
    min-height:200px;    /*this is the key*/
    height:auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

如果您提供height:auto;，则会将div缩放到内容高度如果您想要显示div，min-height是一个解决方案

Answer 4

感谢所有人帮助我，我能够通过以下代码完成它：

mydiv {

  background: url(images/bg.jpg) no-repeat;
  height: 150px; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

最重要的是最后四行对我来说很有用。

Answer 5

.mydiv-left {
    background-image: url(path to image);
    height:(in px);
    width: (in px);
    background-size: 100% 100%;
    background-repeat: no repeat;
    background-position: center center;     
}

如何在不剪切图像的情况下设置背景图像高度，就像响应图像一样？

5 个答案: