Fill bootstrap column with image with same height as other text-column

user_1069424 0
Viewed 340

not sure if possible but I want to ask anyway:

I'm using flex to create a sticky footer. There are bootstrap-containers for the header, content and footer. My content-row exists of three columns: navigation, image and text.

I'd like my image to fill its column (respecting ratio, so hidden overflow) but no more than the text. In the example below I get the left situation (cause the image uses the 100% height) although I want the right one. How can I create this "empty" space?

example image

<body>
   <div id="header" class="container-fluid"></div>

   <div class="wrapper">
      <div id="content" class="container-fluid">
         <div class="row">
            <div class="col-5">
            </div>
            <div class="col-2">
               <div class="limit">
                  <img src="..." />
               </div>
            </div>
            <div class="col-5">
            </div>
         </div>
      </div>
   </div>

   <div id="footer" class="container-fluid"></div>
</body>

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrapper {
  flex: 1;
}

.limit {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.limit img {
    height: 100%;
}
flexbox twitter-bootstrap css image html
1 Answers

I am thinking that you could try background-size:cover in your CSS.

This should make the height of the image 100% of its parent. It does however rely on the image being a background rather than inserted onto the page in an <img> manner.

It also sort of relies on the columns being always a static height but Meh!! That's only so the image doesn't pixelate if the column becomes taller than the image. It will still work if the column height varies. Perhaps best to make an image with a max height that you need.

Also, when specifying the image in your CSS another thing may help. 50% 50% will make sure the image is always centered despite being not quite the right shape for the column.

CSS

.limit{
  background: url( path-to-image ) 50% 50%;
  background-size: cover;
}

At this point, the image column may not show at all because it has nothing in it and therefore no height. You can add h-100 to the class..... I think.

HTML

<div class="limit h-100">
user_171534650
Related