Image not stretching to full parent height?

Question

As you can see in the picture above, the image on the right side is somehow not stretching to the full parent height. Why is this and how can I, without defining a specific height for the parent, always make sure that the image stays on the very edges of the parent? That is, without using background-size: cover; or any CSS pertaining to removing the img tag.

I've tried using this thread: click here

However, I turned unsuccessful.

HTML

<div class="scheme center-center">
    <div class="superintendent center-center">
      <div class="details">
        <div class="hero hero-initial">
          <div class="container">
            <div class="wrapper text-center">
              <div class="hero-header">
                <h1>Welcome back!</h1>
              </div>
            </div>
          </div>
        </div>
        <form class="form" action="#" method="post">
          <div class="container">
            <label for="author-name">Author's Name</label>
            <input type="text" placeholder="John Doe"name="author-name" required>
            <label for="password">Password</label>
            <input type="password" placeholder="Password" name="author-name" required>
            <input type="submit" class="submission" value="Continue from where you left off">
          </div>
        </form>
      </div>
      <div class="graphics">
        <div class="hero-img scheme-img">
          <img src="/assets/img/about-us1.jpg" width="100%">
        </div>
      </div>
    </div>
  </div>

CSS

.scheme {
  height: 940px;
  width: 100%;
  background-color: #f2f2f2;
}
.superintendent {
  width: 900px;
  height: auto;
  border-radius: 5px;
  background-color: #fff;
  -webkit-box-shadow: 3px 6px 30px -2px rgba(0,0,0,0.51);
  -moz-box-shadow: 3px 6px 30px -2px rgba(0,0,0,0.51);
  box-shadow: 3px 6px 30px -2px rgba(0,0,0,0.51);
}
.details {
  float: left;
  width: 60%;
  height: inherit;
}
.graphics {
  float: right;
  width: 40%;
  height: auto; /* Same height as the image currently in use */
}
.scheme-img {
  width: auto;
  height: auto;
}
.hero-initial {
  height: auto;
  padding: 30px 0 0;
}
.hero-initial h1 {
  font-size: 2.4em;
  font-weight: 500;
}
.form {
  max-width: 400px;
  height: inherit;
  margin: auto;
  padding: 0 0 30px 0;
}
label {
  padding: 15px 0;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.4px;
  font-weight: 400;
}
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px 10px;
  display: inline-block;
  font-size: 1em;
  border-radius: 5px;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  outline: none;
}
input[type=submit] {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 15px 10px;
  font-size: 1em;
  cursor: pointer;
  margin: 35px 0;
  transition: 0.2s ease-in-out;
}

I will be happy to assist anyone further in clarifying this question!

Please only include the [mcve] to reproduce the issue. – Håken Lid Feb 23 '18 at 12:16 — Håken Lid, Feb 23 '18 at 12:16

score 2 · Accepted Answer · answered Feb 23 '18 at 14:15

The answer was found due to a new perspective of things: instead of seeing that the child didn't stretch to the parent. I thought why the parent went beyond the child. And thanks to the wonderful @PeeHaa, I was able to find an answer.

The img tag is an inline element, making it display: block; will suffice, and the child will stay within the designated perimeter (parent).

Good luck to you all, and happy coding!

score 1 · Answer 2 · answered Feb 23 '18 at 12:16

Maybe you would like to remove the image tag and have the image as the background of the .scheme-img div. You can set background-size:cover to have the image covering all edges. Please note that this solution may cause blurry image if the image isn't large enough that it has to be enlarged to fit the .scheme-img div.

Btw, i can't seem to see why you have to add both .hero-img and .scheme-img tags to the div. If it is not needed, you are suggested to simplify it.

gauravparmar · Answer 3 · 2018-02-23T12:27:38.413

1

What about adding below CSS and removing your <img> tag? -

.hero-img {
  background:url('/assets/img/about-us1.jpg');
  background-size:cover;
}

Note: Above will cover your entire div having hero-img class with the image you want, edge-to-edge. But it comes with a caution that your div's size may change depending on the device screen size and also image may be of different aspect ratio than your div so in those cases stretching the image will make it lose its aspect ratio.

edited Feb 23 '18 at 12:27

answered Feb 23 '18 at 12:25

gauravparmar

884
1
9
23

Is it possible to make it extend to the edges having aspect ratio in mind? And not using background-size: cover;? – Californium Feb 23 '18 at 12:27
You can only fix one thing out of `height` or `width` in that case to maintain the aspect ratio. Changing both height and width by stretching image will make it lose its aspect ratio so for compensation you need to keep one thing out of width and height to be free. You need to decide on the point that you want to really stretch the image to fully cover the div size even though the div has a different aspect ratio or you want to give more importance to image aspect ratio.. – gauravparmar Feb 23 '18 at 12:34

score 0 · Answer 4 · 2018-02-24T12:44:32.983

This will work.

You can use JavaScript. Here is your code. But before this please create an id of your img tag and place it's value as img. Also, create an id of the div whose size height you want to set as the the height of your image and place it's value as y .

<script>
var a = document.getElementById("y");
var b = document.getElementById("img");
var c = a.offsetHeight +"px";
b.style.height = c;
</script>

I request that you either vote or add a comment for this answer.

Image not stretching to full parent height?

4 Answers4