Guide to implementing proportional height for an element using JQuery 3.3.1

I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and remains at the minimum pixel height defined in the CSS:

JQuery Code:

function adjustHeight() {
$('.resizable').each(function(index, element) {
var width = $(this).width();
var height = width / 1.6 + 'px';
$(this).css('height', height);
});
}

$(window).on('load resize', function() {
adjustHeight();
});

CSS Styles:

.image-background-holder {
width: 100%;
height: auto;
min-height: 20px;
position: relative;
}

HTML Elements:

<div class="image-background-holder resizable" id="box-1"></div>
<div class="image-background-holder resizable" id="box-2"></div>

Answer №1

In my opinion, the issue at hand could potentially be resolved by implementing the min-height CSS property instead. Additionally, it may be beneficial to also contemplate incorporating the use of the max-height property if you wish to uphold the aspect ratio even in cases where the content is not visible.

Answer №2

Great job! Your function appears to be working correctly. You may want to double-check the hierarchy of your css properties, or consider using min-height instead of height

function adjustSize() {
$('.elements').each(function(i, obj) {
var myWidth = $(this).width();
var myHeight = myWidth/1.6 + 'px';
$(this).css('min-height', myHeight);
});
}
$(window).load(function() {
makehorizontal();
});
$(window).resize(function() {
makehorizontal();
});
.image-background-holder{
width:100%;
height:auto;
min-height: 20px;
position:relative;
}

#box-1{
background:red;
width:160px;
}
#box-2{
background:blue;
width:160px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="image-background-holder elements" id="box-1"></div>
<div class="image-background-holder elements" id="box-2"></div>

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

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

Passing a DOM element from Selenium to JQuery and retrieving the results in C#

I recently encountered some challenges with using JQuery to search for information and send it back to Selenium C# in my project. After some trial and error, I was able to figure it out and wanted to share my findings. Specifically, I focused on: How ca ...

What is the best location to insert CSS in an HTML document?

I tried to customize the CSS on my Blogger blog, but unfortunately, I am unable to access the theme designer. As a result, I attempted to add CSS directly into the code using tags. However, I am having trouble locating the tag within the HTML file. This is ...

JQuery: Issue with Passing Value in a Select Query

I am having trouble passing the selected value from a drop-down list to a select query on another page. Although the drop-down boxes are populated successfully, they do not filter the comments by topic ID as expected. My goal is to pass the chosen value fr ...

Is the column-fill property malfunctioning in Chrome?

column-fill: balance; is said to "equally divide content between columns". It appears to be functioning correctly in Firefox and Edge. However, Chrome (and Opera) seem to have a strong aversion to the second column, leaving it mostly empty. It seems to be ...

Using jQuery UI tabs with AJAX responseData

I have a collection of items labeled A, each containing a subset of items called B. The presentation of the B items within A is designed to appear as tabs using jQuery UI tabs. To display the list of A items on a page, I utilize a controller, and then load ...

Error encountered when trying to fetch data from JSON using Ajax

Having trouble sending data to my PHP file which is supposed to insert values into the database and then return JSON encoded data back to my JavaScript file for display. Despite looking at multiple working examples, I can't seem to get it right and do ...

Using Jquery to continuously animate elements breaks and repeats the process

I am currently using a jQuery function to animate my text. The issue is that it animates all elements simultaneously instead of separately. I would like each element (h2, h3, and span) to be animated individually. Any suggestions on how I can achieve this ...

Sending an image to a Kendo popup window triggers a [Request Uri too long 414] error message

On my webpage, I have a Kendo grid that is filled with images and a button labeled "Graph Map". https://i.stack.imgur.com/DyGVs.png Whenever the "Graph Map" button is clicked, a new window pops up displaying the image from the first record in the grid. By ...

Alternate. (individually)

Issue with Running Program I've been struggling to get my program to run correctly. The task at hand is to have the program display only one question at a time. But no matter what I try, clicking on all questions displays all the answers simultaneous ...

Blank page received upon submission of Laravel Select2 application

I'm experiencing an issue with submitting a form using select2. After submission, I receive a completely blank page. I'm not sure why the controller is not working properly. All I need is to send the store id. <form id='filter' act ...

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

Conceal the scrollbar when the expansion panel is in its collapsed state

One issue I am encountering is that the scroll-bar appears when the expansion panel is collapsed, but not when it's expanded. Here are the references: Collapsed Expanded <mat-expansion-panel class="panel"> <mat-expansion-panel-he ...

Exploring the functionalities of scss and minified files within Visual Studio 2017

I have very little knowledge of scss. In our Visual Studio 2017 solution explorer, there is a .scss file called Theme6.scss. When I expand it, I see a file named Theme6.css. Upon expanding that file, two more files are revealed: Theme6.css.map and Theme6. ...

Unselected Ajax radio button detected (in Edit mode)

let genderValue = value.UsrMasGender; //(Get Value ) if(genderValue === "Male"){ //Check Gender Value $('#rdGender').find(':radio[name=rdGender][value="Male"]').prop('checked', true); // #rdGender is the name ...

Comparison of Fabric JS Filters and CSS Filters

We are currently in the process of transitioning a project from HTML and CSS to Fabric JS. This project allows users to manipulate images by moving them around and applying filters. In our current HTML/CSS implementation, we handle image positioning with C ...

Why am I unable to attach this to JQuery?

$("input").keydown(function(event){ if(event.keyCode === 13){ return false; } }); I need to prevent the default action when the "enter" key is pressed in any of my text input fie ...

How to perfectly center an image vertically within a div using CSS

Seeking assistance to properly align images of different sizes in the center of a container div. Check out the attached image for reference, showcasing the gray background and the desired alignment of images in the middle. https://i.sstatic.net/M16V1.png ...