将DIV中的图像作为包含高度小于分割（不同）的背景的适合图像

需要精确地适合较小的div的背景图像。当我使用background-size：cover;图像不准确。原因是我使我的div为400px高度和宽度100％。将DIV中的图像作为包含高度小于分割（不同）的背景的适合图像

在小型设备中工作正常。

当我调整到大屏幕以同样的方式，它不能够适应于股利。

过程到prodduce： 请检查下面拨弄和调整输出窗口更小以及更大。 Fiddle

代码：

#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有高度评价。所以，请投我的问题，即使检查我的代码，并让我知道为什么我不能适应div中的图像。

来源

2017-03-17 Rayudu

克服你的意思是荷马的头被切断？我相信背景是做'掩饰'的意思。 https://css-tricks.com/almanac/properties/b/background-size/元素的大小不能改变配给，并让图像以某种方式保持您的预期比例。 – sheriffderek

你是否真的想要正常流动的文本或内部会发生什么？取决于你内部的内容，你可以做一些事情，比如使用填充来创建图像的纵横比，它会缩放，并且所有图像将始终显示https://jsfiddle.net/s4ruuc3j/1/ –

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

background-size：cover - 缩放图像尽可能大和保持图像宽高比（图像不会挤压）。图像 “覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像会左移/右移或上/下移动。

而对于background-image级图像属性值cover，这就是为什么它看起来在其他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>

来源

2017-03-17 03:34:52 frnt

您可以使用一个透明的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>

来源

2017-03-17 04:23:23 aje

需要更改imagecontainer ID一些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>

来源

2017-03-17 09:44:24

将DIV中的图像作为包含高度小于分割（不同）的背景的适合图像

回答

相关问题