Устранение «отступов» (визуального пространства) с помощью объектно-подходящего размещения или, как правильно масштабировать строку изображений, чтобы она соответствовала div? - PullRequest
Новая
       41

Устранение «отступов» (визуального пространства) с помощью объектно-подходящего размещения или, как правильно масштабировать строку изображений, чтобы она соответствовала div?

1 голос
/ 04 августа 2020

У меня есть интерфейс с фиксированной высотой, который я стилизовал с помощью CSS. Я хочу, чтобы он реагировал на высоту браузера (и, в конечном итоге, ширину ... но по одной проблеме за раз) и У меня есть скрипка, в которой интерфейс работает почти так же, как я бы хотел относительно высоты браузера ... с одним исключением.

Я использую макет flexbox с object-fit: scale-down, чтобы заставить строку изображений в зеленом div сжиматься, когда их содержащий div недостаточно высок, чтобы соответствовать изображения с исходными размерами. Это приводит к некоторому "заполнению", существование которого прекрасно объясняется здесь . Я сделал цвет фона соответствующего div синим, чтобы вы могли четко видеть визуальное пространство, о котором я говорю. Я не хочу, чтобы это пространство вообще появлялось.

Итак, как правильно сделать строку изображений отзывчивой так, как я бы хотел, без введения дополнительного визуального пространства между изображениями, если object-fit не может этого сделать? Спасибо за ваш вклад. 

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: 0 1.5 auto;
  flex-direction: row;
    justify-content: center;
    align-items: center;
  min-height: 0;
    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;
}
<div class="container">
<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/75x250">
    </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>
</div>
...