#html #css #twitter-bootstrap #image-resizing #bootstrap-5
Вопрос:
У меня есть страница с горизонтальной прокруткой с загрузкой 5. Все изображения имеют одинаковую высоту, но разную ширину. Моя цель состоит в том, чтобы изображения всегда использовали всю ширину страницы, поэтому при изменении размера окна браузера изображения тоже должны уменьшаться.
Чего мне не хватает для достижения этой цели? Мы высоко ценим вашу помощь.
.container-fluid{ /* Vertical Scroll */ overflow-x: scroll; overflow-y: hidden; white-space: nowrap; height: 100%; } .flex-nowrap { -webkit-flex-wrap: nowrap!important; -ms-flex-wrap: nowrap!important; flex-wrap: nowrap!important; } .row { flex-direction: column; } .col gt; img { min-height: 100px; max-height: 300px; height: 300px; padding-right:10px; } lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /gt; lt;div class="container-fluid "gt; lt;div class="row flex-row d-flex flex-nowrap"gt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/450x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/500x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/550x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/333x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/450x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/500x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/550x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/333x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/450x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/500x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/550x600.png" alt=""gt; lt;/divgt; lt;div class="col"gt; lt;img src="https://via.placeholder.com/333x600.png" alt=""gt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №1:
Если вы хотите .flex-row , чтобы ширина дочерних элементов определялась изображением, вам нужно .col заменить .w-auto.flex-shrink-1.flex-grow-1 и добавить .img-fluid к вашим изображениям. У вас также есть некоторые ошибки в вашей таблице стилей. Взгляните на фрагмент:
Редактировать
Если вы ищете вертикальную отзывчивость (не то, что обычно имеют в виду люди), используйте единицу vh измерения при настройке высоты и не используйте .flex-shrink-1 . Это позволит сделать изображения в процентах от высоты видового экрана при сохранении соотношения сторон. Взгляните на обновленный фрагмент с использованием height: 30vh; и min-height: 100px; :
.container-fluid { /* Vertical Scroll */ overflow-x: scroll; overflow-y: hidden; white-space: nowrap; height: 100%; } .flex-nowrap { -webkit-flex-wrap: nowrap !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } /* .row { flex-direction: column; } */ .w-autogt;img { min-height: 100px; /* max-height: 300px; */ height: 30vh; padding-right: auto; } lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /gt; lt;div class="container-fluid "gt; lt;div class="row flex-row d-flex flex-nowrap"gt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/450x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/500x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/550x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/333x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/450x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/500x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/550x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/333x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/450x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/500x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/550x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;div class="w-auto flex-grow-1"gt; lt;img src="https://via.placeholder.com/333x600.png" class="img-fluid" alt=""gt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Спасибо за ваше предложение, но такое поведение неверно, представьте, что у меня есть 20 изображений (я обновил ваш пример еще несколькими изображениями). Я хочу прокрутить по горизонтали. ваше решение изменяет размер изображений по размеру страницы, а не по высоте страницы
2. @endo.anaconda, обновлено