自动高度与动态高度图像

我搜索了很多关于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需要动态高度的全宽图像_此解决方案不适用于动态高度。 –

自动高度与动态高度图像

回答

相关问题