Вложенный элемент привязать к background-image

@klopp · Регистрация: 14.10.2017

Студворк — интернет-сервис помощи студентам

Есть .container с картинкой в качестве background. И нужно чтобы .liner находился внутри картинки ( с небольшими отступами). Вся конструкция должна быть адаптивная, например, при сужении экрана картинка становится меньше по высоте, но по-прежнему занимает всю ширину, и нужно чтобы .liner синхронно уменьшился по высоте, сохранив отступы от края картинки.

HTML5
1
2
3
<div class="container">
   <div class="liner"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
.container {
    background: no-repeat url('....');
    background-position: center;/*центрируем картинку по высоте*/
    background-size: contain;/*помещает в видимое пространство картинку целиком*/
    height: 100vh;
}
.liner {
    border: 2px solid LightSteelBlue;
}

@AlexZaw · 27.07.2019, 12:06

klopp, Если только вместо фона использовать тег img:

HTML5
1
2
3
4
<div class="container">
  <img src="http://placekitten.com/500" alt="">
  <div class="liner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem omnis ipsam alias dolores nemo quis eveniet odio eaque sit ad. Eligendi excepturi maxime voluptate nihil quis? Iste ea ex laudantium.</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  height: 100vh;
  position: relative;
}
img {
  width: 100%;
}
.liner {
  position: absolute;
  border: 2px solid LightSteelBlue;
  top: 20px;
  left: 20px;
  right: 20px;
}

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 30.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .