Дочерний блок шире родительского блока с ограниченной шириной. Как сделать?

#html #css

Имеется колонка с текстом. На странице она одна и занимает примерно 70% от всей ширины
страницы. Расположена по-центру.


Внутри текст и некоторые другие элементы, включая изображения.
Нужно сделать так, чтобы изображения занимали, скажем, 90% от ширины всей страницы.


Тут все дело вот в чем.


Использовать position: absolute не получится, потому как часть текста не будет видна,
ибо будет находиться за картинкой.
Просто указать ширину равную, скажем, 180% для изображения тоже нельзя, иначе результат
будет примерно следующий.

Также стоит учесть, что изображения могут быть разные по ширине. Из этого следует,
что нужно сделать следующее: более мелкие изображения, которые не дотягивают до ширины
колонки, нужно растягивать так, чтобы они занимали 100% ширины род. элемента. А те,
что шире нужно растягивать так, чтобы занимали не более 90% от ширины всей страницы.
Грубо говоря все это дело должно выглядеть примерно так:



img {
    min-width: 100%; /* от ширины родителя */
    max-width: 90%; /* от ширины всей страницы */
}



Как подобное можно реализовать? Допускается обрамлять img в div'ы и другие теги.

Вспомнил об еще одном не подходящем способе: вариант обрамления всего содержимого
кроме картинок в дополнительный тег и придание ему margin или padding. Этот вариант
не подходит как минимум по двум причинам: задача заключается в том, чтобы разрешить
картинке быть на всю (почти) ширину страницы, оставаясь при этом по-центру, а не сместить
все кроме картинок, чтобы они казались растянутыми (1). И использование дополнительных
тегов (что будет крайне неудобно делать каждый раз) (2).
    

Ответы

Ответ 1

Достаточно использовать относительные единицы измерения.



body {
  background-color: #eee;
}
.container {
  background-color: #fff;
  max-width: 70%;
  margin: 0 auto;
  padding: 10px; /* Для красоты */
}
img {
  display: block;
  transform: translateX(-50%);
  margin-left: 50%;
  max-width: 90vw;
  min-width: 100%;
}

  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam optio quasi
sapiente labore enim nisi sit, facere adipisci corrupti distinctio. Fuga eos in debitis,
recusandae rerum minus nulla sint doloribus ducimus dolore non, repellendus, ullam quia.
    Molestiae enim ratione eaque?
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nemo sit qui
dolorem, minima quibusdam. Cumque aperiam sint odio culpa totam alias explicabo suscipit
voluptates officiis adipisci temporibus, amet ipsum, vero voluptatibus consequatur
    rerum, aut ullam. Sequi iusto, similique. Quis eaque, veritatis sapiente ea amet,
veniam neque voluptatem repellendus possimus laboriosam quasi nam aliquam ullam similique,
expedita. Quo aliquam molestias ratione nemo pariatur sed velit, sint nulla
    tempore eveniet maiores nesciunt explicabo quas! Nesciunt, reprehenderit! Soluta
voluptatibus perferendis quod nam.
  

    
  
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur a saepe eveniet
similique laudantium non aut delectus, facere libero ut vitae, enim tempore magnam
eligendi adipisci cum minus. Eius doloremque molestias, dolores consequatur hic! Culpa
    eveniet, velit nam dolor dignissimos!
  

    
  
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam optio quasi
sapiente labore enim nisi sit, facere adipisci corrupti distinctio. Fuga eos in debitis,
recusandae rerum minus nulla sint doloribus ducimus dolore non, repellendus, ullam quia.
    Molestiae enim ratione eaque?
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nemo sit qui
dolorem, minima quibusdam. Cumque aperiam sint odio culpa totam alias explicabo suscipit
voluptates officiis adipisci temporibus, amet ipsum, vero voluptatibus consequatur
    rerum, aut ullam. Sequi iusto, similique. Quis eaque, veritatis sapiente ea amet,
veniam neque voluptatem repellendus possimus laboriosam quasi nam aliquam ullam similique,
expedita. Quo aliquam molestias ratione nemo pariatur sed velit, sint nulla
    tempore eveniet maiores nesciunt explicabo quas! Nesciunt, reprehenderit! Soluta
voluptatibus perferendis quod nam.
  

    
  
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam optio quasi
sapiente labore enim nisi sit, facere adipisci corrupti distinctio. Fuga eos in debitis,
recusandae rerum minus nulla sint doloribus ducimus dolore non, repellendus, ullam quia.
    Molestiae enim ratione eaque?
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nemo sit qui
dolorem, minima quibusdam. Cumque aperiam sint odio culpa totam alias explicabo suscipit
voluptates officiis adipisci temporibus, amet ipsum, vero voluptatibus consequatur
    rerum, aut ullam. Sequi iusto, similique. Quis eaque, veritatis sapiente ea amet,
veniam neque voluptatem repellendus possimus laboriosam quasi nam aliquam ullam similique,
expedita. Quo aliquam molestias ratione nemo pariatur sed velit, sint nulla
    tempore eveniet maiores nesciunt explicabo quas! Nesciunt, reprehenderit! Soluta
voluptatibus perferendis quod nam.





Разверните пример на всю страницу. Так лучше видно, что картинки 90% шириной.


Ответ 2

Вариант расчёта через проценты от ширины родительского блока

Родительский блок занимает 70% окна и расположен по центру. Изображение занимает
90% от ширины окна. То есть, оно будет выступать влево и вправо на 10% от ширины окна.
Это составляет 10% / 70% = 0,1428571429 от ширины родительского блока.

А ширина изображения составит 90% / 70% = 1,2857142857 от ширины родителя. 

Значит, нужно задать изображению такие свойства:

margin: 0 -14.28571429%;
width: 128.57142857%;


Проверяем:



.container {
  background: #9c6;
  margin: 0 auto;
  padding: 100px 0;
  width: 70%;
}
.container img {
  margin: 0 -14.28571429%;
  width: 128.57142857%;
}