Изготовление IMG внутри DIV растянуть его ширину на весь экран

Я пытаюсь повторить использование изображения вы видите здесь: https://medium.com/backchannel/the-gentleman-who-made-scholar-d71289d9a82d Изготовление IMG внутри DIV растянуть его ширину на весь экран

Моя проблема, я использую Wordpress, и я не могу разделить содержимое в разных DIV, как это было на Medium.com.

Итак, мне нужен способ сделать изображение, которое находится в пределах ширины DIV шириной 700 пикселей, расширяющей всю ширину экрана.

Вот пример кода:

HTML-:

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Untitled</title> 
     <link rel="stylesheet" href="style.css"> 
     <link rel="author" href="humans.txt"> 
    </head> 
    <body> 

     <div class="main"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reprehenderit eligendi eaque facere vitae, illum amet quasi dolores neque optio tenetur dignissimos, alias nulla repudiandae iste ex numquam atque. 
      </p> 


      <img class="full" src='1.jpg' /> 

      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reprehenderit eligendi eaque facere vitae, illum amet quasi dolores neque optio tenetur dignissimos, alias nulla repudiandae iste ex numquam atque. 
      </p> 
     </div>     
    </body> 
</html>

CSS-:

body { 
    background-color: beige; 
    margin: 0; 
    padding:0; 
} 


.main { 
    width: 900px; 
    margin: auto; 
    background-color: #555555; 
} 

.full { 
    width: 100%; 
}

Есть ли способ, что я могу сделать это изображение растянуть его ширину на весь экран без взяв его из текстового потока DIV?

Я пробовал много вещей, и ничего не добился до сих пор :(

источник

2014-10-20 Souljacker

'макс -width: 100% '? – Benjamin

@Benjamin max-width не будет знать размер окна, только его родитель. Так что это не полное решение – Pogrindis

Если вы питание только для современных браузеров, вы можете использовать the vw unit:

Vw устройство равно 1/100 ширина исходного блока, содержащего

.full { 
    width: 100vw; 
}

источник

2014-10-20 11:25:27

просто для того, чтобы отметить: IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ поддерживается VW – Pogrindis

Но таким образом он будет только появляться с левой границы контейнера. Он не будет идти с левого угла экрана – Souljacker

Если добавить позицию:. абсолют в МАИ п CSS класс будет work.But я не знаю, будет ли он работать для ваших конкретных требований

.main { 
    position: absolute; 
    width: 100%; 
    margin: auto; 
    background-color: #555555; 
}

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

.full { 
    padding-top:50px; 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

источник

2014-10-20 11:51:53

Это работает, но все, что приходит после исчезновения изображения. – Souljacker

Изготовление IMG внутри DIV растянуть его ширину на весь экран

ответ

Смежные вопросы