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.