Adjust the width of a div based on its height dimension

I have a div called #slideshow that contains images with a 2:1 aspect ratio. To set the height of the image using jQuery, I use the following function:

Keep in mind that the Slideshow Div is always 100% wide in relation to the browser window. If the user resizes the window, the slideshow will adjust accordingly.

slideWidth();

function slideWidth(){
var width = $("#slideshow").css("width");
var height = (parseInt(width.substr(0,width.length-2)) / 3);
$("#slideshow").css("height", height + "px");
}

In order to dynamically change the width, I utilize the setTimeout function like so:

setInterval(slideWidth, 1000);

This method is working as intended. However, I am concerned about the impact it may have on the website performance due to constantly refreshing the slidewidth function every second.

Is there a way to achieve this using CSS3 or with jQuery/JavaScript while minimizing the impact on the website?

Thank you. Please share any new ideas or suggestions you may have.

javascriptjquerycss

Answer №1

An innovative technique using only CSS involves utilizing pseudo elements and padding:

div {
    width: 100%;
    position: relative;
    background: blue;
}

div:before {
    display: block;
    content: "";
    padding-top: 60%;
}

By combining the pseudo padding-top, you can achieve flexibility with different aspect ratios.

For instance, setting the 60% padding results in an aspect ratio of 1.67:1.

See Demo on Fiddle

Answer №2

It is recommended to utilize jQuery's .resize() method as it allows for the addition of an event listener that awaits container resizing.

$(window).resize(function(){
  //implement your desired logic here
});

Learn more about the jQuery resize method

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

Tips for showing data associated with the chosen option from a dropdown list in Angular.js fetched from an API

My goal is to automatically display the coordinator's name based on the selection in a dropdown list populated with data from an API. The dropdown options are the email addresses from the JSON data below, and upon selecting a login ID, the correspondi ...

javascriptjqueryangularjs

Is there a way to easily identify the error in my Express application that is preventing my hbs template from running properly?

I am facing an issue with my express code where it is not rendering the data properly. Can someone please assist me in resolving this error? Your help will be greatly appreciated! let express=require('express'); let app=express(); ...

javascriptexpress

Reaching out to the Edge: Enhancing the jQuery Slider Experience

Alright, I'm really excited about using this amazing slider. What I love most is the "free mode" feature that creates this stunning sliding effect. The size and number of slides are absolutely perfect for me. But there's just one small adjustment ...

javascriptjqueryhtmlcssslider

How can we use PHP and jQuery to open a simple modal with data?

Here is a basic modal setup: <div id="info" style="display: none;"> <h3 class="title">User Information</h3> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td width="50%" align="right ...

javascriptphpjquerymodal-dialog

The program keeps encountering the issue of returning undefined while attempting to calculate the sum of elements in an array

I'm having trouble with the code below, it seems to be returning undefined for the sum of the array. Any advice or assistance would be greatly appreciated. var myExpenses = []; var total; function appendExpenses() { ...

javascript

Is it possible to incorporate half an image into a slideshow using html and css?

Hello, I need help modifying this code: <div> <div style="width:100%"> <img src="images/o.jpg" alt="" style="width:100px;height:100px;justify-content: center;padding-left:50%" /> </div> <div id="flipbook"> ...

jqueryhtmlcss

The strict-origin-when-cross-origin policy is enforced when submitting a POST request through a form to a specific route

Currently, I am diving into the world of Node.js, express, and MongoDB by reading Greg Lims's book. However, I've hit a roadblock when trying to utilize a form to submit data to a route that should then output the body.title of the form in the co ...

javascriptnode.jsexpress

What is the best way to incorporate both the left and right menus with the main content

My goal is to incorporate a left and right menu alongside a main feed in the center. However, I'm encountering an issue where the left and right menus are scrolling with the scroll bar. Ideally, I would like the main feed to scroll with the bar while ...

htmlcss

Troubleshooting a problem with placeholder styling on Internet Explorer

Encountering a challenge while styling placeholders, particularly in Internet Explorer where the placeholder text color does not change as expected. Instead, it inherits the color of the input field. :-ms-input-placeholder { color: white; } input ...

cssinternet-explorer

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...

javascripthtmlcssinternet-explorerfirefox

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

javascripthtmlcsspolymer

Retrieve Unformatted Text with CKEditor5

I am familiar with how to retrieve data using the CKEditor5 API as outlined in the documentation and on another discussion post on StackOverflow. However, I am encountering difficulties when attempting to retrieve plain text from the editor. The code I ha ...

javascriptjqueryckeditorckeditor5

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

javascripthtmlgoogle-api

Can TypeScript automatically deduce keys from a changing object structure?

My goal here is to implement intellisense/autocomplete for an object created from an array, similar to an Action Creator for Redux. The array consists of strings (string[]) that can be transformed into an object with a specific shape { [string]: string }. ...

javascriptreactjstypescripttypesinterface

What are the steps to add code into the Monaco Editor using Playwright?

As I explore the world of Playwright, I am faced with a challenge regarding testing a feature that involves a monaco editor. Unfortunately, my search in Playwright documentation and forums did not yield any relevant information. Here is the test scenario ...

javascripttypescriptplaywrightplaywright-test

The list does not get updated through the Ajax call until another request is made to the server

I am currently facing an issue with my ajax call that updates a kendo multiselect's data source based on another dropdown selection. The multiselect also has a read action that filters the data. AJAX Call function getPsychiatrists() { return $.aj ...

jqueryajaxasp.net-mvckendo-ui

A method for displaying monthly data in a single row

Hey there! I'm currently dealing with a data list stored in an array. The |arraycontains various objects` each with their own properties such as name, created-at, and more. My goal is to display all users who were created within a specific month in on ...

javascriptreactjs

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

htmlcsswebplaceholder

Ways to display tinyMCE content in a unique manner

I've been diving into node.js/express/mongoDB and decided to create a blog. I encountered an issue with rendering the content inputted through tinyMCE as HTML - instead, it's displaying the tags around my content. How can I properly display it as ...

javascriptnode.jsmongodbexpresstinymce

Angular - Clear the selection of <select><option> if I opt out of accepting the change

I have created a dropdown menu using HTML <select> and <option> tags, along with a JavaScript function that triggers a confirmation dialogue when an option is selected. The confirmation offers a simple choice between "yes" or "no." If the user ...

javascriptangulartypescript