將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中的圖像作爲包含高度小於分割（不同）的背景的適合圖像

回答

相關問題