自動高度與動態高度圖像

我搜索了很多關於height:auto的信息，但我沒有找到解決我的問題的方法。我需要動力高度全寬的圖像，但是，這並不工作:(任何人都可以幫助！自動高度與動態高度圖像

HTML：

<div id="roster"> 
<div class="image"></div> 
</div>

CSS

#roster{} 

#roster .image{ 
    background-image:("http://nhlawyer.net/wp-content/uploads/header-image-2.jpg"); 
    width:100%; 
    height:auto; 
}

還有就是我jsFiddle

來源

2016-07-15 Daniels Jirgensons

請澄清您的具體問題或添加其他詳細信息以突出顯示您的需要。正如目前所寫，很難確切地說出你在問什麼。 –

只使用div..does中的實際圖片不工作？ –

@Paulie_D _I需要動態高度的全寬圖像_ 實際圖像？它是如何？ –

，如果你使圖像您應該使用圖片作爲<img>標籤不作爲background-image並且默認width:100%;其高度將自動

#roster img{ 
 
\t width:100%; 
 
}

<div id="roster"> 
 
    <img src="http://nhlawyer.net/wp-content/uploads/header-image-2.jpg"> 
 
</div>

如果您使用的是圖像background你應給出元素的具體高度，然後你可以通過處理背景的高度background-size: cover;

#roster .image{ 
 
    height:50px; 
 
    background-image:url("http://nhlawyer.net/wp-content/uploads/header-image-2.jpg"); 
 
    background-size:cover; 
 
}

<div id="roster"> 
 
    <div class="image"></div> 
 
</div>

來源

2016-07-15 14:35:16

非常感謝:) –

請試試

#roster .image { 
    background: url('https://nhlawyer.net/wp-content/uploads/header-image-2.jpg'); 
    width: 100%; 
    height: 250px; 
    background-size: 100%; 
    background-repeat: no-repeat; 
}

來源

2016-07-15 14:34:31 vignesh

_I需要動態高度的全寬圖像_此解決方案不適用於動態高度。 –

自動高度與動態高度圖像

回答

相關問題