Имеется колонка с текстом. На странице она одна и занимает примерно 70% от всей ширины страницы. Расположена по-центру.
Внутри текст и некоторые другие элементы, включая изображения.
Нужно сделать так, чтобы изображения занимали, скажем, 90% от ширины всей страницы.
Тут все дело вот в чем.
Использовать position: absolute не получится, потому как часть текста не будет видна, ибо будет находиться за картинкой.
Просто указать ширину равную, скажем, 180% для изображения тоже нельзя, иначе результат будет примерно следующий.
Также стоит учесть, что изображения могут быть разные по ширине. Из этого следует, что нужно сделать следующее: более мелкие изображения, которые не дотягивают до ширины колонки, нужно растягивать так, чтобы они занимали 100% ширины род. элемента. А те, что шире нужно растягивать так, чтобы занимали не более 90% от ширины всей страницы. Грубо говоря все это дело должно выглядеть примерно так:
img {
min-width: 100%; /* от ширины родителя */
max-width: 90%; /* от ширины всей страницы */
}
Как подобное можно реализовать? Допускается обрамлять img в div'ы и другие теги.
Вспомнил об еще одном не подходящем способе: вариант обрамления всего содержимого кроме картинок в дополнительный тег и придание ему margin или padding. Этот вариант не подходит как минимум по двум причинам: задача заключается в том, чтобы разрешить картинке быть на всю (почти) ширину страницы, оставаясь при этом по-центру, а не сместить все кроме картинок, чтобы они казались растянутыми (1). И использование дополнительных тегов (что будет крайне неудобно делать каждый раз) (2).
Ответ
Достаточно использовать относительные единицы измерения.
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% шириной.
Комментариев нет:
Отправить комментарий