Flexbox: shrink image to fit

前端未结

关注

 4  638

不知归路

I am trying to design a page with the following properties that will be used as digital signage:

Page height is viewport height (100vh) so that sc

相关标签:

4条回答

渐次进展

2021-01-05 10:59

So here's what we know:

The page height is 100vh
The first row is static (height: 100px)
The second row is static (height: 150px)
The third row, which contains images, should fill the remaining height

I think the solution lies in basic math:

100vh - 100px - 150px = height of third row

Instead of this in your code:

div.green {
    background-color: green;
    flex: 0 1 auto;
}

img {
    max-height: 100%;
}

Try this:

div.green {
    background-color: green;
    flex: 1 1 auto;
}

img {
    height: calc(100vh - 250px);
}

body {
  margin: 0;
}
div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}
div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}
/* 
div.green {
  background-color: green;
  flex: 0 1 auto;
}
img
{
  max-height: 100%;
}
*/

div.green {
  background-color: green;
  flex: 1 1 auto;
}
img {
  height: calc(100vh - 250px);
}

<div id="container">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green">
    <img src="http://lorempixel.com/200/300/">
  </div>
</div>

revised fiddle

0 讨论(0)

小鲜肉

2021-01-05 11:04

I just change the img class and add to class .green min-height: 100%; Additionally the image is responsive now with that code.

body {
  margin: 0;
   
}

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

div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}

div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}

div.green {
  background-color: green;
  flex: 0 1 auto;
   min-height: 100%;
}

.green img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}

<body>
  <div id="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"><img src="http://lorempixel.com/200/300/"></div>
  </div>
</body>

0 讨论(0)

眼角桃花

2021-01-05 11:07

You can set the position of the green block to relative and the position of the image to absolute. Also make sure the height of the green block is set to 100% (to take the rest of the height of the page).

This should fix the problem:

body {
  margin: 0;
}

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

div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}

div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}

div.green {
  background-color: green;
  flex: 0 1 auto;
  position: relative;
  height: 100%;
}

img
{
  max-height: 100%;
  position: absolute;
}

<body>
  <div id="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"><img src="http://lorempixel.com/200/300/"></div>
  </div>
</body>

0 讨论(0)

误落风尘

2021-01-05 11:13
Try this fiddle: https://jsfiddle.net/ez4pf8wp/

Added this to the img class:
```
img {
   max-height: 100%;
   height: 100%;
   display: block;
   margin: 0;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...