What's causing my image to not conform to the dimensions of its parent div?

I'm currently working on a website section where I want to display text next to an image. However, the image is not behaving as expected and is stretching out its parent div instead of taking up 100% of the specified height.

According to my understanding, the height I set in the .more-info-section should be passed down to the child div .info-image-container, and then to the image itself. But when I insert the image, it stretches the parent .info-image-container while the height of .more-info-section remains fixed at 30rem.

.more-info-section {
  height: 30rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-image-container {
  height: 100%;
  width: 100%;
}

.info-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.info-info {
  overflow: auto;
}
<div class="more-info-section">
  <div class="info-image-container">
    <img class="info-image" src="Images/bag2.jpg">
  </div>
  <div class="info-info">
    <h1>The Header</h1>
    <p>text</p>
  </div>
</div>

If I explicitly add height: 30rem to .info-image-container, the image scales down but doesn't crop properly due to the object-fit:cover. It's clear that I'm missing something here, but I just can't seem to figure out what it is.

htmlcssimageclass

Answer №1

When setting your image container with a height and width of 100%, keep in mind that this percentage is relative to its closest ancestor, in this case the more-info-section without a defined width. To ensure your image fits responsively within the 30rem container, adjust the CSS properties as follows: set height: 100%; for the image and use max-width: 100%; instead of explicit width.

A working example demonstrating how the image fits inside the container can be seen here:

https://i.sstatic.net/U8bpn.png

To view the corrected version of the example, refer to the CSS code snippet below: 

.more-info-section {
  height: 30rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-image-container {
  height: 100%;
  width: 100%;
}

.info-image {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.info-info {
  overflow: auto;
}
<div class="more-info-section">
  <div class="info-image-container">
    <img class="info-image" src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="info-info">
    <h1>The Header</h1>
    <p>text</p>
  </div>
</div>

The second example illustrates when height: 100%; exceeds 30rem. In such cases, using height: inherit; will constrain the image to match the parent's height only.

.more-info-section {
  height: 30rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.info-image-container {
  /*height: 100%;*/
  height: inherit;
  width: 100%;
}

.info-image {
  max-width: 100%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.info-info {
  overflow: auto;
}
<div class="more-info-section">
  <div class="info-image-container">
    <img class="info-image" src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="info-info">
    <h1>The Header</h1>
    <p>text</p>
  </div>
</div>

Answer №2

Consider utilizing the max-width and max-height attributes to control the dimensions of your image. These attributes allow you to set the maximum width and height that an element can reach. Keep in mind that if the image is smaller than the specified max-width and max-height, these attributes will not have any impact.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unveil a portal to the identical webpage

My apologies for my English skills... Could anyone advise me on how to display an image? Hello, I am looking for a way to have a small window open on my site when a user clicks on the zoom icon, where I can describe a product. Any guidance on the HTML co ...

jqueryhtmlcssbootstrap-4

The exact location of the mouse is currently unknown

When I try to double click on a td, it should change the value of an input field to display the coordinates of the mouse cursor. However, instead of showing the coordinates, it just displays unidentified. How can I modify this script to fix this issue? Her ...

javascriptphphtml

Is it possible to eliminate the black bars from YouTube HQdefault image using only CSS?

(After searching extensively, I couldn't find the exact same question and answer) I have a dilemma with displaying YouTube's hqdefault thumbnails on my page. It seems that they are 480 by 360 pixels, resulting in black bars at the top and bottom ...

htmlcss

Adaptive website backdrop

I have created a unique background for my website design, which includes 3 slices labeled as div id top, middle, and bottom. You can view the design in this image. I am interested in making this background responsive. While I have come across examples of ...

htmlcssresponsive-design

Allow the button to be clicked only when both options from the 1/3 + 1/3 radio buttons are selected

How can I ensure that the next <button> at the bottom of the HTML is only clickable when at least one of each <input type="radio"> is checked? Also, how do I integrate this with my current function? The button itself triggers a jQuery function ...

javascriptjqueryhtmljson

Issue with Flexbox alignment in Safari using Bootstrap 4

Issue with Bootstrap 4 in Safari Version 10.1.2: The properties display:table; and display:table-cell; vertical-align:center; are not functioning as expected on a div with 100% height. <div class="test-slider"> <div class="slide"> ...

htmlcsssafaribootstrap-4slick.js

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

htmlcssfirefoxwindows-7

What purpose does '& .MuiTextField-root' serve within the { makeStyles } function of Material UI?

I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...

cssreactjsmaterial-ui

Experience the thrill of success with a timed animation using Sweet Alert on the powerful Ionic framework

I'm currently working with the ionic framework to develop a mobile application. I'd like to incorporate Sweet Alert for displaying success messages. You can find Sweet Alert at . My goal is to include a timer in the success message. swal("Good ...

angularjscssionic-frameworkbootstrappingsweetalert

Ways to incorporate dropdown menus using Bootstrap

Information regarding the inquiries ........................................................................................... <!DOCTYPE html> <html lang="en" xmlns:th="https://www.thymeleaf.org"> <head> <meta charset="UTF-8"&g ...

javascripthtmlbootstrap-5

Delete footer in twitter bootstrap modal

I am having some trouble with removing the footer from my modal. Although I manage to remove the contents, there is still space being taken up by the footer. Below is the code snippet I am working with... <div class="modal hide fade"> <div cl ...

htmlcsstwitter-bootstrap

Ensure that the checkbox remains constant and visible at all times when using Bootstrap

Introducing the latest checkbox design in Bootstrap4 : Check out the Bootstrap4 checkbox: <label class="c-input c-checkbox"> <input type="checkbox"> <span class="c-indicator"></span> Click here </label> The stan ...

twitter-bootstrapcsstwitter-bootstrap-4bootstrap-4

The annoying Facebook "add a comment" popup refuses to close

Occasionally, the "add a comment" popup (iframe) in Facebook's Like plug-in fails to close and obstructs access to the content underneath. This issue has been noted while using Chrome 21 and Firefox 15. To replicate this problem, you can visit the fo ...

javascriptcssfacebook-likefacebook-javascript-sdk

Creating a full-width input field with text aligned to the right:

.wrap { white-space: nowrap; } input { width: 100%; } body { /* just so you can see it overflowing */ border: 1px solid black; margin: 40px; padding: 10px; } <span class="wrap"><input type="text">.pdf</span> Observing the cod ...

htmlcss

Steps to display a table upon clicking the submit button in a form

I am currently in the process of developing a project that will showcase a teacher's timetable when the user inputs their faculty ID. I am aiming to have the table displayed only after the user clicks the submit button, rather than presenting an empty ...

javascriptphphtmlcss

Using httpRequest to handle binary data in JavaScript

Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...

javascripthtmlxmlhttprequestbinary-dataresponsetext

Is there a way to position the primefaces DefaultMenuModel in front of an accordion panel?

Currently, I have a DefaultMenuModel nested within a tab in an accordion panel. However, the menu is appearing behind the tab of the accordion panel and I want to adjust the z-index of the menu so that it appears in front of the tab. Here is the current ...

htmlcssjsfprimefaces

Revamping the purpose of a function found within an HTML <script> tag

index.html: <script id="change"> function methods(){ return 1; } </script> js.js: ... button.addEventListener("click", ()=>{ document.querySelector("#change").innerHTML = ` function ...

javascripthtml

Attempting to utilize jQuery for altering the background URL leads to the unexpected removal of the -webkit-background-clip:text; effect

Can the -webkit-background-clip:text; effect be preserved when using jQuery to switch the background url? I am experiencing issues where changing the URL removes the text clipping effect. jQuery(function($) { var whatToSwitch = $('.homepage_ove ...

htmljquerycss

Exploring ways to retrieve the content of a parent text element without a tag using xPath

Below you will find the code snippet: <div class="xsmall-12 medium-6 columns"> <label class="device-attribute-label" rel="tooltip" title="Proprietary/trade name of the medical device as us ...

javascriptpythonhtmlseleniumweb-scraping