#html #css #layout #flexbox
#HTML #css #планировка #гибкий ящик #макет #flexbox
Вопрос:
Я создаю строку с элементами. Каждый элемент содержит заголовок, изображение и кнопку. Изображения сохраняют свое соотношение сторон. Я не понимаю, почему оболочка добавляет пустое пространство.
Изолированная среда: https://codepen.io/krosert/pen/QWNNVxg
Теперь результат:
Ожидаемый результат:
код:
<div class="panel">
<div class="item">
<span class="title">first item</span>
<img src="https://i.ibb.co/JQMJ3BW/2311f3c1-2802-417f-9b7e-2147f066e260.jpg">
<div class="btns">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="item">
<span class="title">second item</span>
<img src="https://i.ibb.co/wMyyz1n/934tvi5uykv2.jpg">
<div class="btns">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
</div>
.panel{
position: fixed;
background-color: #685;
top: 30px;
height: 200px;
display: flex;
width: 100%;
}
.item{
margin: 6px;
border: 2px solid black;
background-color: #553;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 0 5px;
max-width: 300px;
}
img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
min-height: 0;
min-width: 0;
}
Комментарии:
1.
flex-direction: column;Это будет зависеть от высоты, и пусть ширина будет переменной chrome исправляет это, потому что он пересчитывает FF не потому, что это может привести к бесконечному циклу, Вопрос в том, какой из трех элементов должен определять ширину.item? потому что прямо сейчас это самый большой элемент, который является изображением до изменения размера, поэтому остается свободное пространство2. Определите ширину . элемент должен иметь максимальную ширину (заголовок, изображение или btns). Я понимаю, о чем вы говорите. Как я могу принудительно рассчитать width .item после изменения размера изображения в меньшем масштабе?
3. Это не может быть максимальное изображение, потому что браузер будет учитывать только первый размер, в этом случае вам придется самостоятельно изменять размер изображений перед их использованием, и вы не можете принудительно вычислять в FF, в chrome при необходимости вы можете сделать это с помощью анимации
4. 1) мб может ли это сделать, если установить исходный размер width height в атрибуте img? Это может помочь браузеру правильно рассчитать с помощью for .item? 2) Можете ли вы исправить мой пример для работы в Chrome (‘в Chrome при необходимости вы можете сделать это с помощью анимации’)
5. У меня это уже отлично работает в Windows Chrome 83 (64-разрядная версия)
Ответ №1:
удалить align-items: flex-start; и добавить object-fit: cover; object-position: top; в img
Комментарии:
1. Результат: изображения обрезаны. Не соответствует «Ожидаемому результату» i.ibb.co/sQgzMp0/a3.png
2. поскольку ваши изображения имеют разные размеры, невозможно отобразить изображение без обрезки и заполнения целых пробелов.
Ответ №2:
удалите эту строку:
.items {
align-items: flex-start;
}
Что вы делаете, так это указываете элементу items, чтобы он помещал изображения в начало столбца их родительского контейнера. Оставляя остальную ширину как пустое пространство.
Чтобы решить проблему с размерами изображений, переполняющими их контейнер, установите максимальную высоту для .items div:
.items{
max-height: 95%;
}
Затем установите, чтобы ваши изображения не имели большей высоты, чем это привело бы к переполнению:
img {
max-height: 140px;
object-fit: contain;
}
Комментарии:
1. И я получаю это: i.ibb.co/sCnpYBG/a1.png Изображения не соответствуют строке. не соответствует «Ожидаемому результату»
2. Я отредактировал свой пост, чтобы решить проблему, с которой вы столкнулись. Мой ответ был прямым ответом на ваш вопрос относительно дополнительного пространства, созданного выравниванием flex. В свою защиту я не стал заканчивать вашу работу за вас, потому что это было не то, что было запрошено. Если вы проголосовали против моего ответа, я бы любезно попросил вас изменить свое мнение. Спасибо
3. очень плохое решение с магическими числами, постоянный размер … ps. я не склоняю
4. Это не идеальное решение, нет. Но проблема в том, что у вас есть изображения с разными соотношениями сторон. Итак, если вы применяете один набор стилей css ко всем своим изображениям, это не будет работать как ваш «Ожидаемый результат». Вы можете либо ожидать, что ваши изображения будут иметь свой собственный размер, который будет расширяться за пределы вашего фиксированного контейнера «panel», либо вам придется установить для них одинаковое соотношение в зависимости от фиксированной ширины или высоты: пример