1

Есть такое:

.wrap{margin:0 40px;}
<div class="wrap">
  <img src="images/img.png">
  <div>
    различные элементы
  </div>
  <img src="images/img.png">
  <div>
    различные элементы
  </div>
</div>`

Как растянуть картинку на ширину экрана, не меняя код? У картинок не должно быть отступа вообще, они должны растягиваться до краев экрана по всей ширине, а у wrap отступ должен остаться

2 ответа 2

0

Использовать относительные единицы vw.

.wrap{margin:0 40px;}

img {
    width: 100vw;
    min-width: 100vw;
    margin:0 -40px;
}
<div class="wrap">
  <img src="http://via.placeholder.com/300x50/green/">
  <div>
    различные элементы
  </div>
  <img src="http://via.placeholder.com/300x50/green/">
  <div>
    различные элементы
  </div>
</div>`

0

Вы можете задать ширину в 100vw (ширина всего вьюпорт, viewport)

body {
/*что бы было нагляднее, сбросил стандартные отступы браузера*/
  margin: 0;
  padding: 0;
}
img {
  width: 100vw;
  margin-left: -40px;
  margin-right: -40px;
}
<div style="margin: 0 40px;" class="wrap"> //margin:0 40px;
    <img src="http://via.placeholder.com/300x50/green/">
    <div>
       различные элементы
    </div>
    <img src="http://via.placeholder.com/400x150/red/">
    <div>
       различные элементы
    </div>
</div>

2
  • Я наверное не правильно выразился. У картинок не должно быть отступа вообще, они должны растягиваться до краев экрана по всей ширине, а у wrap отступ должен остаться 5 ноя 2017 в 21:30
  • Код поправил, изменил ширину с 100% на 100vw 5 ноя 2017 в 21:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.