Resize images smoothly without disrupting the anchor scrolling

Question

Resize images smoothly without disrupting the anchor scrolling

I have created a website with the following design:

(Caution: The site is built using AngularJS on a server that may not serve it correctly - please visit directly instead of using browser reload.)

However, I am facing two conflicting requirements...

The images should scale down when viewed on smaller screens or narrow browser windows.
There is a link that directs users to a specific section called "HEADER" on the page.

My initial solution for requirement #1 was straightforward...

img {
  max-width: 100%;
}

But scrolling to the HEADER section didn't work because the browser couldn't determine image heights initially. So, I decided to add width and height attributes to all my images thinking this would fix it.

However, adding dimensions caused the images to be distorted on narrow screens. To address this, I made further adjustments to my CSS...

img {
  max-width: 100%;
  height: auto;
}

While this resolved the image distortion issue, now the browser once again couldn't accurately determine image heights leading to incorrect scrolling on page load.

I'm wondering if there's a way to instruct the browser to scale images down to fit their containers while maintaining a known aspect ratio so that placeholders are correctly sized before image loading?

If it were a traditional webpage, using window.onload to trigger scrolling would have worked (Refer to http://jsfiddle.net/nbS3F/1/) since it waits for all images to load. However, the website I'm working on is a single-page application implemented in AngularJS, so by the time new images start loading, the load event has already occurred.

html css

Answer 1

Answer №1

Perhaps your scrolling technique needs some adjustment. Try using:

window.scrollTo({
  top: element.offsetTop,
  behavior: 'smooth'
});

Also, consider applying the following CSS rule:

img {
    max-width: 100%;
}

Check out this Fiddle for reference

Remember, you can't have a max-width of 100% while also not having a max-width of 100%. It's just not possible.

Answer 2

Perhaps your scrolling technique needs some adjustment. Try using:

window.scrollTo({
  top: element.offsetTop,
  behavior: 'smooth'
});

Also, consider applying the following CSS rule:

img {
    max-width: 100%;
}

Check out this Fiddle for reference

Remember, you can't have a max-width of 100% while also not having a max-width of 100%. It's just not possible.

Answer 3

Answer №2

My recommendation is to incorporate CSS3 along with responsive theme techniques. It is essential to adjust various parameters for each screen size by utilizing:

@media only screen and

I suggest looking into responsive themes with jQuery plug-ins on Google. This resource can greatly assist you in creating a more polished and professional website design.

Answer 4

My recommendation is to incorporate CSS3 along with responsive theme techniques. It is essential to adjust various parameters for each screen size by utilizing:

@media only screen and

I suggest looking into responsive themes with jQuery plug-ins on Google. This resource can greatly assist you in creating a more polished and professional website design.

Answer 5

Answer №3

In my quest for a solution (although I am open to finding an even better one), I have resorted to manually inspecting each image to determine if it has been loaded or not. By listening to the onload and onerror events of images that are not yet ready, I delay scrolling until all images have either successfully loaded or failed.

var target = document.getElementById(targetID);
if (target) {
    var scroll = function() {
        target.scrollIntoView();
    };
    var toLoad = 0;
    var onload = function() {
        toLoad--;
        if (toLoad === 0) {
            scroll();
        } else {
            console.log('Waiting on ' + toLoad + ' images');
        }
     };
     var images = document.querySelectorAll('img');
     for (var i = 0; i < images.length; i++) {
         if (!images[i].complete) {
             toLoad++;
             images[i].onload = onload;
             images[i].onerror = onload;
         }
     }
     if (toLoad === 0) {
         scroll();
     }
 }

Answer 6

In my quest for a solution (although I am open to finding an even better one), I have resorted to manually inspecting each image to determine if it has been loaded or not. By listening to the onload and onerror events of images that are not yet ready, I delay scrolling until all images have either successfully loaded or failed.

var target = document.getElementById(targetID);
if (target) {
    var scroll = function() {
        target.scrollIntoView();
    };
    var toLoad = 0;
    var onload = function() {
        toLoad--;
        if (toLoad === 0) {
            scroll();
        } else {
            console.log('Waiting on ' + toLoad + ' images');
        }
     };
     var images = document.querySelectorAll('img');
     for (var i = 0; i < images.length; i++) {
         if (!images[i].complete) {
             toLoad++;
             images[i].onload = onload;
             images[i].onerror = onload;
         }
     }
     if (toLoad === 0) {
         scroll();
     }
 }

Resize images smoothly without disrupting the anchor scrolling

Answer №1

Answer №2

Answer №3

Similar questions

Various settings in JQuery UI Slider

What is the best method for removing extra spaces from an input field with type "text"?

Experiencing the AngularJS [$injector:modulerr] error message despite having flawless code

str method not displaying the string properly

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

Ways to align Material-UI component side by side

When using a custom selection color to highlight underlined text, the underline becomes invisible

Building a loading bar using dots

Is it possible to refresh the webpage in Angular when the tab is clicked?

Is jQuery the key to Masonry's stacking magic?

Vertical alignment of text within a center位置

Best Practices for Handling Form State in ReactJS with Redux

What could be causing my Bootstrap Carousel to malfunction?

Tips on eliminating borders in react-table components

Problem with Bootstrap container-fluid overlapping with floated element

Using two modal popups while passing an identifier

Element within container div being forced out of view (off-screen)

Trouble getting CSS and JavaScript to function properly with HTTPS?

Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

Incorrect posture during the movements

Resize images smoothly without disrupting the anchor scrolling

Answer №1

Answer №2

Answer №3

Similar questions

Various settings in JQuery UI Slider

What is the best method for removing extra spaces from an input field with type "text"?

Experiencing the AngularJS [$injector:modulerr] error message despite having flawless code

__str__ method not displaying the string properly

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

Ways to align Material-UI component side by side

When using a custom selection color to highlight underlined text, the underline becomes invisible

Building a loading bar using dots

Is it possible to refresh the webpage in Angular when the tab is clicked?

Is jQuery the key to Masonry's stacking magic?

Vertical alignment of text within a center位置

Best Practices for Handling Form State in ReactJS with Redux

What could be causing my Bootstrap Carousel to malfunction?

Tips on eliminating borders in react-table components

Problem with Bootstrap container-fluid overlapping with floated element

Using two modal popups while passing an identifier

Element within container div being forced out of view (off-screen)

Trouble getting CSS and JavaScript to function properly with HTTPS?

Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

Incorrect posture during the movements

str method not displaying the string properly