0 Пользователей и 2 Гостей просматривают эту тему.
  • 10 Ответов
  • 594 Просмотров
*

GuDeVic

  • Захожу иногда
  • 228
  • 0 / 0
Добрый день.
Можно ли вывести на всю ширину экрана (или на ширину body) картинку, которая находится внутри нескольких блоков (divs)?
У всех внешних div - position:relative, но есть разные margin и padding.
Спойлер
[свернуть]
*

marksetter

  • Завсегдатай
  • 1045
  • 40 / 0
будет только на ширину родителя
индивидуальная помощь: @SetAlexx
*

sivers

  • Живу я здесь
  • 2536
  • 348 / 0
Можно ли вывести на всю ширину экрана (или на ширину body) картинку, которая находится внутри нескольких блоков (divs)?
Если дать картинке фиксированную позицию, то можно:
Код
img {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Можно и через абсолютную позицию, но тогда придется указывать конкретные значения, а не проценты. Например, с помощью js. И top/left тоже придется указать относительно первого нестатичного родителя.
На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/
*

fbr

  • Завсегдатай
  • 1638
  • 197 / 7
примерно так

Код
.wrap {
position: relative;
width:800px;
margin: 0 auto
}
.wrap img {
width: 100vw;
box-sizing: border-box;
position: absolute;
margin-left: calc( (800px - 100vw) / 2);
}
*

GuDeVic

  • Захожу иногда
  • 228
  • 0 / 0
примерно так

Код
.wrap {
position: relative;
width:800px;
margin: 0 auto
}
.wrap img {
width: 100vw;
box-sizing: border-box;
position: absolute;
margin-left: calc( (800px - 100vw) / 2);
}
Спасибо. Картинка сдвигается к левой стороне экрана, но мне надо, чтобы сама картина растянулась на всю ширину экрана. пропорционально. Размер оригинальной картинки 1920x479px.
*

GuDeVic

  • Захожу иногда
  • 228
  • 0 / 0
Если дать картинке фиксированную позицию, то можно:
Код
img {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Можно и через абсолютную позицию, но тогда придется указывать конкретные значения, а не проценты. Например, с помощью js. И top/left тоже придется указать относительно первого нестатичного родителя.
Спасибо. Картинка сдвигается к левой стороне экрана, но с размером родительского div. А мне хотелось бы, чтобы сама картина растянулась на всю ширину экрана. пропорционально. Размер оригинальной картинки 1920x479px.
*

sivers

  • Живу я здесь
  • 2536
  • 348 / 0
А мне хотелось бы, чтобы сама картина растянулась на всю ширину экрана.
Чтоб пропорционально - можно растягивать div, а картинку присвоить ему в качестве бэкграунда.
На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/
*

GuDeVic

  • Захожу иногда
  • 228
  • 0 / 0
Чтоб пропорционально - можно растягивать div, а картинку присвоить ему в качестве бэкграунда.
А как растянуть вложенный div? Ведь размеры этого div (в который вставлена картинка) тоже ограничены несколькими родительскими слоями?
*

marksetter

  • Завсегдатай
  • 1045
  • 40 / 0
так назначьте фоном основному
индивидуальная помощь: @SetAlexx
*

GuDeVic

  • Захожу иногда
  • 228
  • 0 / 0
так назначьте фоном основному
Спасибо за совет. Но мне такая картинка нужна только на одной странице.
Я правильно поняла, что  картинку можно переместить относительно родительского div, но сам по себе размер картинки ограничен размерами этого родительского div. А что тогда дает overflow:visible?
*

marksetter

  • Завсегдатай
  • 1045
  • 40 / 0
так на нужной странице задайте диву класс и все
индивидуальная помощь: @SetAlexx
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вывод содержимого модуля mod_custom без html разметки

Автор goga_pgasovav

Ответов: 3
Просмотров: 668
Последний ответ 07.06.2024, 11:15:50
от goga_pgasovav
Вывод даты материала в списке тегов

Автор androv77

Ответов: 2
Просмотров: 1118
Последний ответ 09.11.2023, 16:33:08
от denxio
Вывод дополнительного поля материала в модуле

Автор timofe

Ответов: 10
Просмотров: 1840
Последний ответ 06.10.2023, 14:02:24
от Mitriy
Изменение отображения модуля от разрешения экрана

Автор mag_num83

Ответов: 5
Просмотров: 634
Последний ответ 17.05.2023, 09:35:23
от Театрал
Вывод даты публикации материала в списке меток tags

Автор androv77

Ответов: 1
Просмотров: 488
Последний ответ 07.01.2023, 13:23:15
от NewUsers