具有动态高度图像的自动高度答案

【问题标题】：Auto height with dynamic height image具有动态高度图像的自动高度
【发布时间】：2016-07-15 22:37:22
【问题描述】：

我搜索了很多关于 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

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
只在 div 中使用实际图像.. 不工作吗？
@Paulie_D 我需要动态高度的全宽图片 实际图片？怎么样？
@Paulie_D 当我更改浏览器大小时，图像高度会发生变化。这些都是响应式设计的东西，但我不知道怎么做。
@Paulie_D 然后图像显示在那个高度，我改变了什么，但我不需要那个。我需要动态高度。

标签： html css responsive-design responsive responsive-images

【解决方案1】：

您应该将图像用作<img> 标签而不是background-image，默认情况下，如果您将图像设置为width:100%;，其高度将是自动的

#roster img{
	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>

【讨论】：

【解决方案2】：

请试试这个

#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;
}

【讨论】：

我需要具有动态高度的全宽图像此解决方案不适用于动态高度。