CODEWITHSUNDEEP
htmlcss
Californium
Californium

Reputation: 591

Image not stretching to full parent height?

ClarificationImage

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!

Upvotes: 0

Views: 1123

Answers (4)

user8158111
user8158111

Reputation:

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.

Upvotes: 0

Californium
Californium

Reputation: 591

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!

Upvotes: 2

gauravparmar
gauravparmar

Reputation: 924

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.

Upvotes: 1

gabrielchl
gabrielchl

Reputation: 606

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.

Upvotes: 1

Related Questions