CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrapflexbox
bflydesign
bflydesign

Reputation: 483

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

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%;
}

Upvotes: 1

Views: 2036

Answers (1)

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1134

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">

Upvotes: 2

Related Questions