Изображение не покрывало контейнер на меньших разрешениях

Question

Я сам пытался решить проблему, но я не могу этого сделать.

Перейти на мой сайт здесь:

http://digesale.com/

и прокрутите вниз до нижнего колонтитула. Чуть выше нижнего колонтитула вы увидите изображение. Это тот, который говорит: «Получите все, начните покупать» и т. Д. У меня проблема с ...

В моем браузере/разрешение это выглядит идеально, но друг сказал мне, что по его разрешению он не охватывает все пространство слева направо. Если вы нажмете «Ctrl + -» на клавиатуре, вы увидите проблему.

Это код, я использую, чтобы положить, что образ есть:

<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350"> 

Может кто-нибудь помочь мне сделать это изображение покрыть всю ширину этой секции, так что она выглядит хорошо даже на меньших разрешениях экрана?

спасибо.

Answer 1

Если вам нужно, чтобы покрыть вы можете использовать изображение в качестве фона:

<div class="background"></div> 

и в CSS

.background { 
    background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
} 

Важной частью является background-size: cover, поскольку он заполняет весь DIV во всех случаях ,

EDIT

Если вы хотите другое поведение, вы можете использовать ваш старый IMG тег

<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img"> 

И устанавливаемые сотового

.responsive-img { 
    margin-bottom: -20px; /* this was writting in inline style. */ 
    width: 100%; 
    height: auto; 
} 

Answer 2

Попробуйте ниже CSS

.background { 
    background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat; 
    background-size: contain; 
    width: 100%; 
    height: 26vw; 
}