Я хотел бы знать, как уменьшить строку изображений, чтобы все они поместились в div с неопределенной высотой. Изображения никогда не должны увеличиваться за пределы своей исходной высоты, и они должны сохранять свое соотношение сторон. Кроме того, я бы хотел, чтобы высота содержащего его div была ограничена собственной высотой самого высокого изображения. Теги изображений не имеют атрибутов высоты или ширины.
Вот скрипка с тем, что у меня есть. Я подошел к этому, используя flexbox и object-fit: scale-down. Рассматриваемая строка изображений серого цвета и находится в блоке div с зеленым фоном. В настоящее время они вообще не масштабируются, но они, по крайней мере, центрированы по вертикали и горизонтали, как я бы хотел. Вот изображения до и после эффекта, которого я хотел бы достичь (извините за переключение зеленого фона на желтый в изображениях). Дополнительные сведения под фрагментом кода, но это подводит итог основному c вопросу.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
background-color: pink;
}
<div class="flex-column">
<div class="primary">
<img src="https://via.placeholder.com/200">
<div class="mask">
<img src="https://via.placeholder.com/200/FF000">
</div>
</div>
<div class="flex-row">
<div class="context">
<img src="https://via.placeholder.com/75x150">
</div>
<div class="context">
<img src="https://via.placeholder.com/150x75">
</div>
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div>
</div>
</div>
Я работаю над интерфейсом (фиксированной высоты), стилизованным под CSS, и, вероятно, буду задавать ряд вопросов. У меня не очень хорошо получается CSS, поэтому я открыт для подходов, которые сильно отличаются от моей неудачной попытки!
Вверху находится одно центрированное изображение («основное изображение»), ниже - два других изображения («второстепенные изображения») в ряду, а под ним - текст. В конце концов, я бы хотел, чтобы оба набора изображений реагировали на изменения высоты и ширины браузера. Однако я бы предпочел масштабировать вторичные изображения больше, чем первичное изображение, когда браузер слишком короткий, чтобы вместить все в исходных размерах. Для этого казалось, что здесь будут работать контейнеры flexbox с различными значениями flex-grow; кажется, что он работает с основным изображением, но вторичные изображения отказываются масштабироваться.
Кроме того, я знаю, что, даже если мой текущий подход сработал, object-fit: scale-down стратегия оставит после себя некоторые нежелательные «отступы» , которые приведут к визуальному пространству между вторичными изображениями. Я чувствую, что может потребоваться совсем другой подход, чтобы получить желаемый эффект, поскольку я хочу, чтобы изображения располагались рядом друг с другом без лишнего пространства вокруг них. Кроме того, также возникает проблема с самим контейнером, когда браузер становится очень тонким, поскольку появляется полоса прокрутки, но она всегда должна быть 90vh.
Спасибо всем за ввод!