Подгонка всего в статической гибкой колонне - PullRequest
Новая
       9

Подгонка всего в статической гибкой колонне

0 голосов
/ 22 декабря 2019

Я пытаюсь вписать 4 деления в границы представления флексбокса без прокрутки столбца, но мне не удается заставить его работать.

Что я хочу: enter image description here

Что я испытываю: enter image description here

Я понятия не имею, что я делаю, и просто случайно переставляю связанные с флексом CSS-поля, чтобы попытаться исправить это, ха-ха. Если бы кто-то мог указать на то, что не так, я бы любил тебя всегда.

Вот суть моего кода: 

body {
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontent {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#header #firstContent #secondContent {
  flex: 1 1 auto;
}
#header {
  background-color: green;
      font-weight: 700;
    align-content: center;
    font-size: 7rem;
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture {
  background-color: blue;
  flex: 0 1 auto;
}
<body>
  <div id="flexcontainer">
    <div id="header">Title</div>
    <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
    <div id="firstContent">first</div>
    <div id="secondContent">second</div>
  </div>
</body>

Ответы [ 5 ]

1 голос
/ 22 декабря 2019

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

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  flex: 1;
  min-height: 0;
}

body {
  margin: 0;
}

img {
  object-fit: contain;
  height: 100%;
  width: auto;
}
<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>
0 голосов
/ 22 декабря 2019

Я немного прибрал ваш html и упростил CSS. Вы хотите убрать overflow: hidden из тега body и дать каждому из ваших элементов класс вместо идентификатора. Наконец, упростите раздел изображения, сделав сам тег изображения элементом flexbox: 

html,
body {
  height: 100%
}

body {
  /*overflow: hidden;*/
  margin: 0;
}

.flexContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
  flex: 1 1 auto;
}

.flexContainer__header {
  background-color: green;
  font-weight: 700;
  align-content: center;
  font-size: 7rem;
}

.flexContainer__firstContent {
  background-color: red;
}

.flexContainer__secondContent {
  background-color: yellow;
}

.flexContainer__picture {
  display: block;
  width: 100%;
}
<div class="flexContainer">
  <div class="flexContainer__header">Title</div>
  <img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
  <div class="flexContainer__firstContent">first</div>
  <div class="flexContainer__secondContent">second</div>
</div>
0 голосов
/ 22 декабря 2019

Разрешить элементу, содержащему изображение, уменьшить его размер содержимого .

Определить параметры изображения.

(протестировано в Chrome, Firefox и Edge. ) 

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  min-height: 0;
  background-color: blue;
}

#picture>img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#header {
  background-color: green;
  font-weight: 700;
  font-size: 7rem;
}

#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}

body {
  margin: 0;
}
<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

jsFiddle demo

0 голосов
/ 22 декабря 2019

есть несколько вещей, которые нужно исправить в вашем CSS, опечатка и значение 

html, /* to inherit height */
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
  flex: 1;
  margin: 2px 5vw;/* for demo */
}
#header {
  background-color: green;
  font-weight: 700;
  /* align-content: center; or did you forget display:flex here */
  font-size: calc(1rem + 2vw);
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture { 
  display: flex;
  min-height: 0; /* force size calculation*/
}
img {
  max-height: 90%;/* whatever */
  margin: auto;/* or align-content + justify-content : center on  flex parent*/
}
<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>
0 голосов
/ 22 декабря 2019

Пожалуйста, проверьте идентификатор вашего контейнера div 

<div id="flexcontainer">

измените 

#flexcontent {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

на 

#flexcontainer {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

попробуйте подгонку объекта для img 

img {
 object-fit: contain;
 height: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...