#css #bootstrap-4 #flexbox #fullscreen #responsive-images
#css #bootstrap-4 #flexbox #полноэкранный #отзывчивый-изображения
Вопрос:
Пытался заставить это работать уже пару дней, но безуспешно.
Это предназначено для большего монитора (2560х1080).. таким образом, более низкая отзывчивость области просмотра не имеет значения.
Я пытаюсь:
- Сделайте контейнер подходящим для большого полноэкранного режима от края до края.
- Создайте сетку (например, такую, как на прикрепленном изображении)
- Отображать изображения в ячейках сетки, которые используют ровно 100% доступного им пространства (на основе% значений базовой ячейки / div) — так что измените размер с учетом соотношения сторон, а затем растяните или что-то в этом роде.
К сожалению, каждая попытка — это просто беспорядок … совсем недавно я использую bootstrap 4 со следующим дополнительным css
https://codepen.io/jpub/pen/qBNbGOV
#mmenu_screen > .row {
min-height: 100vh;
}
.flex-fill {
flex:1 1 auto;
}
Любые советы будут оценены.
Это должно выглядеть так…….
Комментарии:
1. Пожалуйста, пересмотрите, чтобы точно объяснить, с чем у вас возникли проблемы. Это неясно ни из этого поста, ни из вашей демонстрации (вы можете уменьшить ее размер, поскольку у большинства из нас нет доступного огромного монитора).
2. [… поскольку у большинства из нас нет доступного огромного монитора] Вот в чем проблема (о чем этот пост.) Мы тоже этого не делаем. В любом случае, не так уж и много. Изображения не масштабируются. Если я изменю размер изображений-заполнителей, это сведет на нет цель проблемы.
3. @isherwood может быть, это помогает, чтобы люди могли видеть это лучше: codepen.io/jpub/pen/RwRabaY все, что я сделал для этого форка, — это уменьшил высоту изображений и изменил их все на img-fluid.
Ответ №1:
вам не нужен bootstrap или фреймворк CSS grid 😉 это простой API, прочитайте CSS, и вы поймете, как это работает. вы просто добавляете необходимые divs, затем вы даете ему буквально шаблон, и он упорядочит их для вас. это на 100% отзывчивый (до предела, конечносодержимое).
- для управления изображениями используйте фоновое изображение и размер в процентах с помощью «background-size» 😉
надеюсь, я помог
.grid-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-areas:
'area1 area1 area1 area1 area4 area4'
'area1 area1 area1 area1 area5 area5'
'area2 area2 area3 area3 area6 area6'
'area2 area2 area3 area3 area7 area7';
grid-gap: 10px;
background-color: #f9fad2;
padding: 10px;
}
.grid-container > div {
background-color: #18bc9c;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 { grid-area: area1; background-image: url("https://www.bmw.in/content/dam/bmw/marketIN/bmw_in/Images/all-models/BMW Series/bmw-2-series/Main Banner Desktop.jpg/_jcr_content/renditions/cq5dam.resized.img.1680.large.time1601620546255.jpg"); background-size: cover; }
.item2 { grid-area: area2; }
.item3 { grid-area: area3; }
.item4 { grid-area: area4; }
.item5 { grid-area: area5; }
.item6 { grid-area: area6; }
.item7 { grid-area: area7; background-image: url("https://cdn.cnn.com/cnnnext/dam/assets/190815154638-01-bugatti-centodieci-exlarge-169.jpg"); background-repeat: no-repeat;
background-size: 100% 100%; } <div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div> Комментарии:
1. Работает отлично — и так просто! Спасибо!
2. Кроме того, grid-template-areas — это потрясающе. Вау. css-tricks.com/snippets/css/complete-guide-grid/… Кстати, я делаю это, чтобы создать экран в стиле киоска для наших видеокамер. В нашей текущей системе много проблем, поэтому я подумал, что сделаю вид с прямым доступом к камере и настрою chrome в режиме киоска, чтобы при отключении и восстановлении питания экран возвращался к этому виду.