Adjust the height of the container to accommodate responsive images automatically

Hello, I am trying to make the container height adjust automatically based on the responsive image it contains. The container's display is set to flex and the image is positioned between two divs with the class "text-block". These divs have a width of 37% and a min-width of 37%. The image's width is set to a max of 100% so it adjusts its size responsively as the screen width changes.

My goal is to have the container's height change dynamically based on the image height. The container's height should always match the image height, and I also want to ensure that neither the container nor the image exceeds 100vh in height when they expand.

PHOTO:

containers height adjust to img height

height of container and img don't exceed height of 100vh

LINK to problem: Here is my code on codepen: https://codepen.io/milkiway420/pen/xxrVgMZ

    body {
      height:100%;
    }
    .container{
      display: flex;
      width: 100%;
    }
    .text-block {
      width: 37.645448%;
      min-width:37.645448%;
      background: #e3e3e3;     
    }
    img {
      max-width:100%;
    }

Answer №1

Hey Alex, for a proper height use the following CSS property:

object-fit: cover;

Here's a tutorial on responsiveness:

https://www.example.com

Answer №2

It seems you are looking to implement a flex design based on your question

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #efefef;

}
h1,h2,h3 {
  margin: 0;
}
h1 {
  margin-bottom: 20px;
}

* {
  box-sizing: border-box;
}

/*Custom Style*/

.container {
  display: flex;
  position: relative;
  width: 100%;
  height:100%;
  margin: 0px auto;

  
  .text-block {
    display: flex;
    flex: 1 0 30%;
    background: #e3e3e3;
    
    .text-wrapper {
      margin: 0 10%;
      overflow: auto;
    }
    
  }
  
  .image-block {}

  .image-container {
    flex: 1 1 50%;
  }       
  img {
    max-width:100%;
    max-height: 100vh;          
  }
 
}

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

When you click on the button, the section will not be displayed

I'm facing an issue with my code. I have a set of five buttons and corresponding sections. When a button is clicked, the active and active-btn classes are supposed to be added to that button as well as the corresponding section element with the same i ...

Automatically refresh a table within a webpage with updated database information without the need to manually refresh the

I'm a beginner in PHP and AJAX. The issue I am currently encountering is displaying a table on a JSP page and wanting to auto-update the table without refreshing the page every 10 seconds. I retrieve values from a database using a PHP page Below is t ...

Alter the content of a div depending on the values of three different elements

Hello everyone, I am new to the world of jQuery and javascript, and I am facing a challenge that I need some help with. Within a form, there are two fields that I would like to perform calculations on. Here is what I have attempted so far: jQuery.fn.calcu ...

Mobile Exclusive Bootstrap 5 Collapse Feature

Trying to implement the default collapse feature in Bootstrap 5x specifically for mobile devices. Despite setting up a CSS media query as per my research, the .collapse function doesn't seem to work as intended? The goal is to have the collapsed DIV ...

Repairing the 'Uncaught TypeError: Cannot read property 'split' of undefined' bug in a Prestashop Module

Help! I'm encountering an issue with a Prestashop module, and the developer is unresponsive. Can anyone shed light on why I am seeing this error in the console? Thank you so much in advance! admin.js:57 Uncaught TypeError: Cannot read property ' ...

Update array of hotel room reservations using Mongoose

I am currently developing a hotel room reservation system and have defined the attributes in the Room model as follows: rId: String, allocation: [{ date: Number, // 210403 == 2021-04-03 slots: [{ type: mongoo ...

Guide to creating intricate animations using a CSS/JS user interface editor

Is there an easy way to create complex animations without blindly tweaking keyframes? I'm searching for a tool or editor that can generate the necessary animation code, similar to this example: https://codepen.io/kilianso/pen/NaLzVW /* STATE 2 */ .scr ...

"Enhance your website with interactive jQuery lightbox buttons for easy navigation

As I explore the jquery lightbox plugin, I find it to be quite straightforward. However, I am curious if there is a way to make the "previous" and "next" buttons of the plugin function without the images needing to be named sequentially (e.g., "image1.jpg, ...

Using both Typescript and Javascript, half of the Angular2 application is built

My current project is a large JavaScript application with the majority of code written in vanilla JavaScript for a specific platform at my workplace. I am looking to convert this into a web application that can be accessed through a browser. I believe thi ...

Initiate a Gravity Forms form refresh after modifying a hidden field with jQuery

TO SUM IT UP: Is there a way in Javascript to activate an update on a Gravity Form that triggers the execution of conditional logic? ORIGINAL QUESTION: I'm using Gravity Forms and I have set up an "on change" event $('#gform_1').find(&apos ...

Using the reduce method in JavaScript or TypeScript to manipulate arrays

Just exploring my culture. I have grasped the concept of the reduce principle var sumAll = function(...nums: number[]):void{ var sum = nums.reduce((a, b) => a + b , 0); document.write("sum: " + sum + "<br/>"); } sumAll(1,2,3,4,5); The r ...

An animation triggered by scrolling using the @keyframes rule

Is it possible to smoothly animate a variable font using @keyframes on scroll and have it complete the animation loop when the user stops scrolling, rather than snapping back to the starting position? I've managed to make the animation work, but it l ...

Having trouble getting the jQuery slider to function properly

Can someone help me figure out how to make a slider work with jQuery? Here is the HTML code I am currently using: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://aj ...

Having trouble executing node commands in the terminal

After launching the terminal on my Mac, I made sure to confirm that Node was installed by running the command: node -v v14.17.5 Next, when attempting to open a file I had created called index.html from Visual Studio Code, I encountered an error message in ...

Nuxt encountered an issue with Vue hydration: "Tried to hydrate existing markup, but the container is empty. Resorting to full mount instead."

I'm facing an issue while trying to integrate SSR into my project. I keep encountering this error/warning. How can I pinpoint the problem in my code? There are numerous components in my project, so I'm unsure if I should share all of my code, b ...

When trying to upload a file using multer, an error occurred stating "Unexpected field

My current issue involves using multer to upload an image from a form. However, I am encountering an Unexpected field error after uploading the image. In my HTML code, I have specified the file and file-model names as myFile. app.js var express = re ...

The postman does not retain any data

I am currently facing an issue where I am using Postman to enter a post into a MongoDB server, but the post returns empty. Even after checking my server, nothing has been entered and there are no errors displayed. Here is the route file: router.post(&apos ...

How can I speed up the loading time of my background image?

I have noticed that my background image is loading slowly on my website. I expected it to be cached so that subsequent pages using the same background would load instantly. However, the background image is only loading once the entire page is drawn. My CS ...

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

Functions for abbreviating and combining strings in Javascript

Looking for help to simplify and shorten a Javascript function: $scope.doRefresh = function (){ if($scope.bulletpointPopular){ ArticleService.popular().then(function(data){ $scope.articles = data; }) .finally(function() { ...