html - шпаргалка - flexbox example



Подгонка изображения в автогигант (2)

У меня очень странная проблема, которую я пытался решить за последние 2 дня безрезультатно. Страница, которую я создаю, имеет следующую структуру:

Я легко могу достичь макета AB с общим родителем, имеющим display: flex; flex-direction: column; align-items: stretch display: flex; flex-direction: column; align-items: stretch display: flex; flex-direction: column; align-items: stretch и установка A для flex: 0 0 auto и B для flex: 1 1 0; min-height: 100px; flex: 1 1 0; min-height: 100px;

Однако у меня есть реальная проблема с компоновкой C и D внутри B. Я чувствую, что flex / row - правильный подход для B, но я просто не могу понять специфику. Поэтому я пытаюсь:

.B {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.C {
    flex: 1 1 0;
}

.D {
    object-fit: scale-down;
}

Но этого явно недостаточно. Изображение либо вообще не уменьшается, масштабируется, но искажается или оставляет много места, если я установил его также с flex: 1 1 0 с минимальной шириной.

Любые идеи, как я могу достичь того, что мне нужно здесь?

ОБНОВЛЕНИЕ: Я попытался добавить jsfiddle здесь - https://jsfiddle.net/2gsrzwwq/3/ - но по какой-то причине он даже не похвалил бы height:100% от родителя. Что касается установки изображения, мне нужно, чтобы изображение уменьшалось до высоты D div, а затем уменьшалось уменьшение D-блока, чтобы просто содержать уменьшенное изображение, а для блока C занимать оставшуюся ширину.

https://ffff65535.com


После намного большей борьбы и еще одной бессонной ночи я придумал что-то вроде работы. Жертва, которую я должен был сделать, не регулирует ширину контейнера изображения и всегда устанавливает на нем половину ширины экрана (обратите внимание, что в реальном приложении нет цветов фона, поэтому это будет не так странно, скорее будет некоторое дополнительное пространство). Мне нужно обсудить это с клиентом, но я думаю, что смогу их убедить. Вот что я придумал:

https://jsfiddle.net/2gsrzwwq/6/

HTML:

<div class="page">
  <div class="A">
  </div>

  <div class="B">
    <div class="C">
    </div>
    <div class="D">
      <img src="http://res.freestockphotos.biz/pictures/10/10677-illustration-of-a-red-lobster-pv.png"/>
    </div>
  </div>
</div>

CSS:

div {
  box-sizing: border-box;
}

.page {
  width: 100%;
  height: 250px;
  border: solid 1px black;
  margin: 5px;
  background-color: lightYellow;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.A {
  background-color: lightPink;
  margin: 5px;
  flex: 0 0 50px;
}

.B {
  background-color: lightBlue;
  margin: 5px;
  flex: 1 1 0;
  min-height: 80px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between
}

.C {
  background-color: lightGreen;
  margin: 5px;
  flex: 1 1 0;
  min-width: 100px;
}

.D {
  background-color: lightGrey;
  margin: 5px;
  flex: 1 1 0;
  min-height: 50px;
  display: flex;
  justify-content: flex-end;
}

.D img {
  flex: 1 1 0;
  max-height: 100%;
  max-width: 200px;
  object-fit: scale-down;
  object-position: top right;
}


Я сам боролся с одной и той же проблемой:

Максимальное возможное размерное изображение и расширение div для заполнения пробела

Я придумал следующее решение, которое я также предоставил в качестве ответа на свой вопрос. См. Https://jsfiddle.net/wwhyte/vjLps7qs/ ; замените изображение на http://placekitten.com/1600/900, чтобы увидеть поведение ландшафта.

CSS:

  .container {
    width: calc(100vw);
    height: 100vh;
    overflow: hidden;
  }

  .top {
    height: 1.25em;
    background: yellow;
  }

  .innerCtr {
    height: 100%;
    overflow: hidden;
  }

  .left {
    height: 100%;
    background: red;
    overflow: hidden;
  }

  .right {
    max-height: 100%;
    max-width: 80%;
    background: blue;
    float: right;
    object-fit: contain;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-52%) scale(0.95);
  }

HTML:

<div class="container">
  <div class="top">
  </div>
  <div class="innerCtr">
    <img class="right" src="http://placekitten.com/1600/900">
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

Я думаю, что это происходит:

  • В правильном классе:
    • max-height, max-width и object-fit дают мне масштабирование, которое мне нужно.
    • float: right дает нужную мне позицию. (Я получил это из статьи, которую я нашел вчера, но теперь потерял, я отредактирую этот ответ, чтобы предоставить атрибуцию, если я его снова найду).
    • преобразование вдохновлено статьей о вертикальном выравнивании по адресу: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ .
    • масштаб 95% улучшает видимость изображения.
  • В левом классе высота: 100% дает размер панели, которую я хочу
  • Класс innerCtr дает родительскому элементу изображение для вычисления его высоты против
  • Класс контейнера подходит для окна просмотра в окне браузера.

Даже это не совсем идеально. Существует какое-то странное взаимодействие между высотой верхнего бара и высотой изображения, так что нижняя часть изображения выталкивается из дисплея. Выдающееся количество меньше, но связано с высотой верхнего бара - я не полностью исследовал. Если вы удалите верхний бар, CSS выше будет вести себя отлично. Я обратился к этому с 95-процентным масштабом и небольшой настройкой на Y-преобразование, но это все еще не ведет себя точно к малым размерам окна - изображение не идеально вертикально центрировано. Я думал, что установка height = calc (100vh-1.25em) в классе контейнера может исправить это, но на самом деле это нарушает вертикальное масштабирование изображения, поэтому теперь оно масштабируется только горизонтально. Это было совершенно неожиданное поведение! Но кроме этого это отвечает моим потребностям.





flexbox