Гибкая адаптивная сетка изображений на основе пропональности
В основном я разработал эту сетку изображений на основе версии Bootstrap 4+. Он выглядит хорошо для определенного устройства и макета после добавления нескольких media query.
Код ссылки
.cmd-three-img-container {
position: relative;
margin-bottom: 30px;
height: 320px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 768px) {
.cmd-three-img-container {
height: 200px;
}
}
.cmd-main-img {
width: 50%;
height: 100%;
margin-left: 5px;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-main-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-img-stacked {
width: 50%;
height: 100%;
cursor: pointer;
}
.cmd-img-overlay {
position: absolute;
top: 10px;
right: 10px;
}
.cmd-img-overlay h4 {
float: right;
font-size: 22px;
font-weight: 400;
color: #fff;
font-family: "Rubik", sans-serif;
}
.cmd-top-img,
.cmd-bottom-img {
width: 100%;
height: calc(50% - 2.5px);
cursor: pointer;
}
.cmd-top-img img {
width: 100%;
height: 100%;
object-fit: cover;
background-position: center;
border-top-left-radius: 4px;
}
.cmd-bottom-img img {
width: 100%;
height: 100%;
object-fit: cover;
background-position: center;
border-bottom-left-radius: 4px;
}
.cmd-top-img {
margin-bottom: 5px;
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "cmd-three-imggrid-area">
<div class = "container-fluid px-5-percent">
<div class = "row">
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
</div>
</div>
</div>Поэтому я хочу сохранить пропорциональность Три изображения такой же, как на настольном компьютере, так же, как и на мобильном устройстве, а также на iPad! Не имеет значения сетка из двух или трех изображений в зависимости от макета устройства, но уменьшите общий размер сетки, содержащий ширину и высоту изображения, а также плавность.
заранее спасибо
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
74
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Проблема со статической высотой, которую вы выставили на .cmd-three-img-container. Так что реагировать не получится. Я удалил это, а также изменил height с .cmd-main-img на min-height: 100%. я обновил твой код
.cmd-three-img-container {
position: relative;
margin-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.cmd-main-img {
width: 50%;
min-height: 100%;
margin-left: 5px;
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-main-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-img-stacked {
width: 50%;
height: 100%;
cursor: pointer;
}
.cmd-img-overlay {
position: absolute;
top: 10px;
right: 10px;
}
.cmd-img-overlay h4 {
float: right;
font-size: 22px;
font-weight: 400;
color: #fff;
font-family: "Rubik", sans-serif;
}
.cmd-top-img,
.cmd-bottom-img {
width: 100%;
height: calc(50% - 2.5px);
cursor: pointer;
}
.cmd-top-img img {
width: 100%;
height: 100%;
object-fit: cover;
background-position: center;
border-top-left-radius: 4px;
}
.cmd-bottom-img img {
width: 100%;
height: 100%;
object-fit: cover;
background-position: center;
border-bottom-left-radius: 4px;
}
.cmd-top-img {
margin-bottom: 5px;
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "cmd-three-imggrid-area">
<div class = "container-fluid px-5-percent">
<div class = "row">
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
<div class = "col-sm-3">
<div class = "cmd-three-img-container">
<!-- top level image container START-->
<div class = "cmd-img-stacked">
<!--stacked img container -->
<div class = "cmd-top-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-bottom-img">
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
</div>
<div class = "cmd-main-img">
<!--Main image -->
<img src = "https://i.imgur.com/H4bbqpA.jpg" alt = "">
</div>
<div class = "cmd-img-overlay">
<h4>Work</h4>
</div>
</div>
</div>
</div>
</div>
</div>Другие вопросы по теме
CSS странный сдвиг div
Как сохранить несколько выпадающих меню при перезапуске приложения?
Получить элемент по идентификатору в компоненте Angular 7 (TypeScript) и использовать его атрибуты в компоненте
CSS: Проблемы масштабирования с разными разрешениями
Как исправить проблему с перенаправлением, я уже пробовал множество решений (коды) уже
Использование @font-face приводит к тому, что текст имеет высоту 0 на Mac
Как прочитать атрибут данных выбранной строки (tr) столбца (td)
Применить стиль для выбранного значения выбора при начальном рендеринге
Добавление ввода изменяет высоту другого ввода с помощью display flex, если установлено в em
Получить BLOB из базы данных с изображением с помощью Spring MVC и Thymeleaf
Похожие вопросы
Заставить firebase вернуть отсортированный ответ
Vue.js — пустое сообщение о результатах с группой перехода («дочерние элементы должны быть нажаты»)
Тип ввода = Файл, FileUpload исчезает после JavaScript
Что предпочтительнее: `toBe(null)` или `toEqual(null)`?
Как я могу условно показать изображение на основе результатов игры?
CSS: Проблемы масштабирования с разными разрешениями
Атрибут набора данных chartjs скрыт от функции
Предупреждение Firefox «Эта операция требует обнуления данных текстуры» при использовании Web GL
Правильная проверка, содержит ли строка другую в javascript
Патч Object Tap — Spark AR Facebook