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