Tips for maintaining the full width of an image within the viewport while also preserving a fixed aspect ratio of 16:9

After extensive research on the topic, I find the solution to implementing a parallax effect using GSscrolltrigger a bit complex. This is mainly because I need to dynamically adjust the height of the parent div based on @media CSS, while ensuring that the img (maintaining a 16/9 ratio) is placed within a child div nested in a bootstrap fluid container div.

Is there a more efficient and simpler method to achieve this, possibly without the need for dynamic adjustments?

<div class="container-fluid parallax-main d-flex align-items-center justify-content-center">
    <div class="parallax-image" style="background: url('pathToImage') no-repeat; background-size:cover;"></div>
    <div class="parallax-overlay">...</div>
</div>

.parallax-main {
  height: 50vmin;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.parallax-image { 
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  opacity: 1;
}
.parallax-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  max-width: 1140px;
  position: relative;
  z-index: 2;
}

@media (min-width:768px) {
  .parallax-main { height: 55vmin; }  
}

@media (min-width:992px) {
  .parallax-main { height: 60vmin; }  
}

@media (min-width:1100px) { 
  .parallax-main { height: 70vmin; }
}

@media (min-width:1200px) { 
  .parallax-main { height: 80vmin; }
}

@media (min-width:1200px) { 
  .parallax-main { height: 90vmin; }
}

@media (min-width:1400px) { 
  .parallax-main { height: 100vmin; }
}

Answer №1

Experiment with using width: 100vw for .parallax-image

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

Make sure that the element with a relatively positioned stays contained within the top container

While relative and absolute positioning can be useful, they have the drawback of taking elements out of the flow which can lead to restrictions in their usage. Recently, I came across one such restriction and I'm interested to see if there is a soluti ...

Navigate between tabs with a single click

Hey there! I'm having trouble putting together a webpage that features a sidebar. I want to make it so that clicking on one of the links at the top will switch the tab and its content accordingly. However, the current code I have isn't working an ...

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

Tips for keeping a div visible while hovering over a link using only CSS

Apologies for any language errors in advance. I will do my best to explain my issue accurately: In my CSS, I have created a hidden div that is displayed none by default. When I hover over a link in the navigation bar, I change the display to block, creati ...

What could be causing the data toggle feature in my navbar to not work on Bootstrap?

Here is a code snippet to create a simple collapsible navbar with Bootstrap 5 that includes a logout button. However, the data toggle feature for the logout button doesn't seem to work when clicked. Any suggestions on how to fix this? <!DOCTYPE ...

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

Adding an external font with CSS in Bootstrap 5 can be quite challenging

Hey there, I'm a newcomer around here and I could use some help with my post. It might not be perfect, but any guidance you can offer would be appreciated. The issue I'm facing is that I'm having trouble getting the font I downloaded or lin ...

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The initial code snippet is not functioning correctly DN.onkeyup = DN.onkeypress = function(){ var div = document.getElementById("DN").value document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; } #one{ heigh ...

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

When Hovering, Pseudo-class Cannot be Applied

In my design, I have an image overlaid with a Play icon. The concept is that when the user hovers over the image, the brightness of the image decreases and the Play icon is replaced with a Magnifying Glass icon. However, there seems to be a problem. When ...

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

Optimizing the rendering of Font-awesome CDN JS for better performance on Pagespeed Insights

Instead of directly linking to the Font Awesome CSS, I have chosen to leverage the JavaScript provided by the trustworthy and efficient Font Awesome CDN. This allows for asynchronous loading of icons on my homepage, ensuring a seamless user experience. How ...

Show a Pop-Up When a Key is Pressed

My website popup features a 'Close' button in the top right corner, a text section with a background image, and a 'Print' button at the bottom. The popup automatically appears when the page loads. However, once closed, there is currentl ...

Stylesheets do not have the capability to support template tags

Imagine you have created a stylesheet in Django within the static files and everything is working smoothly. However, when trying to use the following line, an error occurs: .PostProfilePic { width: 50px; height: 50px; border-radius: 50%; background ...

How to modify the color of a div element with jQuery?

I need some help changing the color of a div with 'jQuery', but I am not sure how to do it. Below is the code I have been trying: function updateDivColor() { $('#OutlineX1').css("color","blue"); } ...

Synchronize CSS Properties with JavaScript Event

Is there a more efficient way to synchronize two properties using JavaScript or JQuery? For instance, when I have an editable text field and I switch it to an input box upon double click, how can I ensure that the input box adjusts its size along with the ...

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

Difficulty encountered while using CSS to customize a vue template

I'm currently working on a login page and experiencing difficulty styling Vue templates using CSS. Here is the code that works without Vue: HTML <body class="text-center"> <form class="form-signin"> <h1 class="h3 mb-3 fon ...

Custom background options for Wordpress developer

I have been exploring the WordPress codex to learn about incorporating custom background options, similar to this example $defaults = array( 'default-color' => '', 'default-image' => '&apo ...

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...