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

Question

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

Answer 1

请试试这个

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

Answer 2

您应该将图片用作 <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>

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

Auto height with dynamic height image

html

css

responsive-design

responsive-images

responsive