html - css响应式背景图像未显示

Question

当没有分配固定的高度和宽度时，我无法显示我的图像。我希望我的图像对我的网格具有灵活性和响应性，所以我认为可行的方法是将高度和宽度设置为 100%，但无济于事。

如何让图像显示并能够相应地更改大小？

HTML

    <div class="row">
    <div class="large-12 columns">
        <div class="hero">
            <img id="image" src="steve1.png" alt=""/>
        </div>
    </div>
</div>

CSS

  .hero {
max-width: 100%;
height: auto;
background-repeat: no-repeat;
margin: 0;

  }

Answer 1

试一试：

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(steve1.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}
body{
    min-height:100%;
}

Answer 2

尝试添加到css：

.hero img {width:100%;}

您必须将样式添加到 img 它本身，而不是容器 div。