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

GuDeVic

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

marksetter

  • Захожу иногда
  • 367
  • 7 / 0
будет только на ширину родителя
*

sivers

  • Завсегдатай
  • 1968
  • 268 / 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

  • Завсегдатай
  • 1588
  • 184 / 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

  • Захожу иногда
  • 209
  • 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

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

sivers

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

GuDeVic

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

marksetter

  • Захожу иногда
  • 367
  • 7 / 0
так назначьте фоном основному
*

GuDeVic

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

marksetter

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

Перестали работать ссылки внутри сайта

Автор Viktor_ist

Ответов: 1
Просмотров: 192
Последний ответ 07.05.2022, 09:42:02
от Viktor_ist
Вывод дополнительного поля материала в модуле

Автор timofe

Ответов: 9
Просмотров: 626
Последний ответ 04.05.2022, 08:43:42
от effrit
Как уменьшить ширину ползунка полосы прокрутки css?

Автор web1

Ответов: 1
Просмотров: 165
Последний ответ 27.04.2022, 00:04:40
от marksetter
Как вставить описание картинки в Joomla 3.10.8?

Автор Benderalfa

Ответов: 8
Просмотров: 286
Последний ответ 25.04.2022, 21:51:55
от Benderalfa
Вывод части материала в модуле

Автор timssky

Ответов: 23
Просмотров: 828
Последний ответ 15.04.2022, 17:48:41
от vseok