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

コンテナ div ではなく、img 自体にスタイルを追加する必要があります。