Design a dynamic div element for banners that adjusts to different screen

Question

Design a dynamic div element for banners that adjusts to different screen

Is there a way to create a responsive div similar to the img-responsive class in Bootstrap, but for a div element that changes its height relative to its width when the window size is adjusted?

For example, if you look at the slider on this website "", you will notice that as you resize the window, the slider maintains the ratio of height to width.

Do I need to use JavaScript to achieve this effect, or can it be done with CSS or Bootstrap alone?

    <div class="responsive-banner">
        <!-- height/width === k -->
    </div>

jquery html css twitter-bootstrap responsive

Answer 1

Answer №1

If you want to achieve this without worrying about legacy IE, simply utilize @media queries.

To do so, set the minimum and maximum width / height of the viewport and then assign the appropriate height property based on specified break points.

For example:

@media only screen
and (min-width: 320px) /* Set your preferred minimum width */
and (max-width: 480px){ /* Set your preferred maximum width */
.responsive-banner{
     height:200px; /* Input desired height value */
}
}

You can incorporate various queries like the one above to tailor different break points or ranges accordingly.

Answer 2

If you want to achieve this without worrying about legacy IE, simply utilize @media queries.

To do so, set the minimum and maximum width / height of the viewport and then assign the appropriate height property based on specified break points.

For example:

@media only screen
and (min-width: 320px) /* Set your preferred minimum width */
and (max-width: 480px){ /* Set your preferred maximum width */
.responsive-banner{
     height:200px; /* Input desired height value */
}
}

You can incorporate various queries like the one above to tailor different break points or ranges accordingly.

Answer 3

Answer №2

To achieve this layout, you can utilize the Bootstrap Grid System.

For example:

<div class="row">
  <div class="col-md-3">
    This is text 1
    </div>
  <div class="col-md-3">
    This is text 2
    </div>
  <div class="col-md-3">
    This is text 3 
    </div>
  <div class="col-md-3">
    This is text 4
    </div>
  </div>

Include the bootstrap CSS (you can download and reference locally or use a CDN path).

Essentially, I have created a row using Bootstrap and divided it into four evenly sized columns. Whatever content you place in each column will automatically adjust to fit the column width by default.

By adding custom divs within these column classes, your layout will be responsive to changes in browser window size.

Answer 4

To achieve this layout, you can utilize the Bootstrap Grid System.

For example:

<div class="row">
  <div class="col-md-3">
    This is text 1
    </div>
  <div class="col-md-3">
    This is text 2
    </div>
  <div class="col-md-3">
    This is text 3 
    </div>
  <div class="col-md-3">
    This is text 4
    </div>
  </div>

Include the bootstrap CSS (you can download and reference locally or use a CDN path).

Essentially, I have created a row using Bootstrap and divided it into four evenly sized columns. Whatever content you place in each column will automatically adjust to fit the column width by default.

By adding custom divs within these column classes, your layout will be responsive to changes in browser window size.

Answer 5

Answer №3

After doing some research and pondering, I have come up with a few ways to achieve this:

Utilizing CSS units :

We can utilize CSS units for relative sizing:
- em: Relative to the font-size of the element (2em equals 2 times the size of the current font)
- ex: Relative to the x-height of the current font (not commonly used)
- ch: Relative to the width of the "0" (zero)
- rem: Relative to the font-size of the root element
- vw : Relative to 1% of the width of the viewport*

We can use the vw unit to establish the height of the div element as shown below:

.responsive-banner {
    height: 30vw;
}

Using jQuery :

Firstly, we assign a favorite ratio to a variable and then adjust the height of the element based on its width.

var ratio = 700/1920;
$(document).ready(function() {
  $('.responsive-banner').height(ratio * $('.responsive-banner').width());
});

$(window).resize(function() {
  $('.responsive-banner').height(ratio * $('.responsive-banner').width());
})

Answer 6

After doing some research and pondering, I have come up with a few ways to achieve this:

Utilizing CSS units :

We can utilize CSS units for relative sizing:
- em: Relative to the font-size of the element (2em equals 2 times the size of the current font)
- ex: Relative to the x-height of the current font (not commonly used)
- ch: Relative to the width of the "0" (zero)
- rem: Relative to the font-size of the root element
- vw : Relative to 1% of the width of the viewport*

We can use the vw unit to establish the height of the div element as shown below:

.responsive-banner {
    height: 30vw;
}

Using jQuery :

Firstly, we assign a favorite ratio to a variable and then adjust the height of the element based on its width.

var ratio = 700/1920;
$(document).ready(function() {
  $('.responsive-banner').height(ratio * $('.responsive-banner').width());
});

$(window).resize(function() {
  $('.responsive-banner').height(ratio * $('.responsive-banner').width());
})

Design a dynamic div element for banners that adjusts to different screen

Answer №1

Answer №2

Answer №3

Utilizing CSS units :

Using jQuery :

Similar questions

When utilizing jQuery to add a <li> element, it suddenly vanishes

Show an HTML image encoded in base64 from its origin

Tips for removing a row from a table

Having trouble accessing and setting the values of a JSON array retrieved using $.get method in JavaScript outside of the function

Can the <br> tag affect the layout in terms of horizontal space?

Ensuring a div remains perfectly centered

Disable Chrome's suggestions bar on your Android phone

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

Limiting the scope of the jQuery scrollToFixed functionality within various nested DIV elements

The local copy of Jquery.min.js is failing to trigger the window load function

Substitute the images with links provided in an external text file

Draggable vue includes a Textarea HTML element that allows users to easily

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Is there a way to prevent HTML code from being executed when sharing it as text? I want to be able to share code without it being activated as HTML on the page

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

The property 'innerHTML' cannot be assigned to null, as stated in Vue

The JQuery and Javascript code is malfunctioning in Internet Explorer version 6 and later

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

Using string literals in Vue and HTML classes

What are the steps to switch the dropdown values?