DIV中的Fit图像作为背景，包含小于分割的高度(不同)

Question

需要在小视场中准确地拟合较大的背景图像。当我使用背景尺寸:封面；图像不完全符合。原因是我把我的div定为400 as高度和宽度100%。

在小型设备上工作得很好。

​

​

同样，当我调整到大屏幕时，无法适应div.。

​

​

过程产生：，请在小提琴下面签入，并调整输出窗口的大小，使之更小，更大。Fiddle

original image link

代码：

​

#imagecontainer {
    
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
    height:400px;
    width:100%;
    border: 1px solid;
    
     -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position:center center;
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

​

注意:我尝试使用堆栈溢出的所有提到的答案。没有人有身高。但我有我的潜水高度。所以，请投票给我的问题，即使检查我的代码，并让我知道为什么我不能符合图像在div。

Answer 1

设置background-image size to 100% 100%，即它的高度和宽度，这使得它在mobile devices和large screen上看起来都是一样的，但是在大屏幕上看起来有点拉伸。

背景尺寸:覆盖比例尽可能大，并保持图像高宽比(图像不会被压扁)。图像“覆盖”容器的整个宽度或高度。当图像和容器有不同的尺寸时，图像被裁剪为左/右或上/下。

而属性值cover用于background-image缩放图像，这就是为什么它在其他break points上看起来不同的原因。

​

#imagecontainer {
    background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
    height:400px;
    width:100%;
    border: 1px solid;
    background-position:center center;
    background-size:100% 100%;
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

​

Answer 2

您可以使用带有背景色的透明png图像。

​

#imagecontainer {
    
    background:rgb(125,126,125)  url("https://upload.wikimedia.org/wikipedia/commons/2/2a/Wikipe-tan_in_navy_uniform2_transparent.png") no-repeat;
    height:400px;
    width:100%;
    border: 1px solid;
    
     -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position:center center;
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

​

Answer 3

需要在imagecontainer上更改一些css，这样才能解决问题

​

#imagecontainer {
    
  background-attachment: scroll;
background-clip: border-box;
background-color: hsl(211, 58%, 53%);
background-image: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto !important;
border: 1px solid;
height: auto;
width: 100%;
}

<div id="imagecontainer">
  hi
  dadsa
  <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div>
   <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div> <div>
  dsa sad sadasd sa
  </div>
</div>

​