Image going outside of parent element, despite height being defined

user_12288554 0
Viewed 689

I'm trying to get an image inside of a div which will take the height of the parent div. In this case it's .hero. The problem is that the image is going outside the parent div quite a bit, even though I specified it should be 100%. It seems to just go to the maximum height of the image, and completely ignoring the height set in .hero.

Everything has border-box and I'm also using tailwind. Am I missing something very important here that I'm overlooking? Is border-box not working correctly as it should?

Vue file

<template>
  <div class="hero grid grid-cols-12">
    <div class="hero-left col-span-5 grid-cols-12">
      <div class="hero-left-top col-span-12">
        <h1>Let's start something big together.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. consectetur
          adipisicing elit
        </p>
        <div class="bottom">
          <a class="btn" href="">Register</a>
        </div>
      </div>
      <div class="hero-left-bottom mt-10 col-span-12 grid gap-9 grid-cols-12">
        <div class="col-span-4">
          <h2>30+</h2>
          <p>Years of Excellence</p>
        </div>
        <div class="col-span-4">
          <h2>30+</h2>
          <p>Years of Excellence</p>
        </div>
        <div class="col-span-4">
          <h2>30+</h2>
          <p>Years of Excellence</p>
        </div>
      </div>
    </div>
    <div class="hero-right col-span-7">
      <img class="" src="/imgs/businessman.jpg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Hero",
  components: {},
};
</script>

<style lang="scss" scoped>
@import "../../../sass/app.scss";

.hero {
  margin: 50px 0;
  padding: 0 $padding;
  height: 900px;
  background: red;

  &-left {
    &-top {
      .bottom {
        height: 60px;
        display: flex;
        align-items: center;
      }

      p {
        margin: 30px 0;
      }

      .btn {
        height: auto;
        background: $purple;
        padding: 15px 50px;
        font-size: 20px;
        font-weight: 700;
        color: white;
      }
    }
  }

  &-right {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;

    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>

Global SCSS file

* {
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif !important;
}
css
1 Answers

Set the height of an image to 100% isn't going to make it relative to the parent element. Instead, it is relative to it's own height! So let say I have an image with height of 300px and width of 500px. If I say in css height: 100% even though the parent element height set to 120px, the img height will still be 300px.

However, there is a value to make an element's property relative to it's parent. It is inherit

Simply :

div {
    height: 200px;
    width: 300px;
}
img {
    width: inherit;
    height: inherit;
}

This also sometimes causes an aspect-ratio problem for the image, but if it just an image for background or something it doesn't really matter. It does become weird if the image is a logo, icon, word, or a people. You can play with the height of the parent and set the height or width to auto or max-content.

div {
    height: 200px;
    width: max-content;
}
img {
    height: inherit;
    width: auto;
}
user_171990440
Related