CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 4319

How can I use CSS to ensure an image does not exceed available browser height?

I am putting together a page using the Bootstrap Freelancer theme (https://startbootstrap.com/themes/freelancer/).

I want to ensure the image of the ninja fills the available space, but does not go off the bottom of the page. (I've put a red border on the container DIV to make it easier to see what is going on.)

How can I set it so it always resizes to the biggest it can be, but without cropping any of the image?

I have tried using object-fill:contain but that didn't work.

enter image description here

Also if I try setting height:80% or something, it resizes the image much smaller for some reason - not sure why?

enter image description here

This is the code:

<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column" style="border: 1px solid red">

  <!-- Masthead Avatar Image -->
  <img class="masthead-avatar mb-5" style="margin-top:-100px;" src="img/magic-assassin.svg" alt="">

  <!-- Masthead Heading -->
  <h1 class="masthead-heading text-uppercase mb-0">Magic Assassin</h1>

  <!-- Icon Divider -->
  <div class="divider-custom divider-light">
    <div class="divider-custom-line"></div>
    <div class="divider-custom-icon">
      <i class="fas fa-star"></i>
    </div>
    <div class="divider-custom-line"></div>
  </div>

  <!-- Masthead Subheading -->
  <p class="masthead-subheading font-weight-light mb-0">Nu-Disco - Edits - Balearic</p>

</div>
</header>

and this is the CSS:

.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.masthead .masthead-subheading {
  font-size: 1.25rem;
}

    .masthead .masthead-avatar {


    }

Upvotes: 0

Views: 494

Answers (3)

Jose A. Ayll&#243;n
Jose A. Ayll&#243;n

Reputation: 886

You should be able to set the child's image size to the parent's div using height. Try adding position: relative to the parent.

Here an example:

changeParentHeight = value => document.getElementsByClassName("parent")[0].style.height = `${value}px`;
.parent {
  position: relative;
  height: 100px;
  width: 200px;
  text-align: center;
  border: 5px solid red;
}

.parent>img {
  height: 100%;
  max-width: 100%;
}
<input type="range" min="100" max="1000" value="100" onchange="changeParentHeight(this.value)" />
<div class="parent">
  <img src="https://assets.fireside.fm/file/fireside-images/podcasts/images/b/bc7f1faf-8aad-4135-bb12-83a8af679756/cover_medium.jpg?v=0" />
</div>

Upvotes: 2

Claire
Claire

Reputation: 3184

You can just set your img to 100vh. Keep in mind this considers the height of the search bar also, so you may have a small bit cut off. To combat this, I usually just set to 95vh. This takes care of any cut off.

img {
  height:100vh;
}

In your case, since you are using calc for your height, you can apply this method in the same way, like so:

img {
  height:calc(100vh-74px); // I'm assuming this is the height of your nav, given your css
}

Upvotes: 2

Gaurav Tanwar
Gaurav Tanwar

Reputation: 540

Try using max-height and set it to initial.

Upvotes: -2

Related Questions