My Bootstrap 4 page contains responsive images and anchor tags within the text.
.img-fluid {
max-width: 100%;
height: auto;
}
Once I navigate to this page by clicking a link (e.g., 'mypage#section-one'), the page initially loads on the anchor tag. However, as the images load, the content shifts causing me to lose the anchor tag position. I understand that providing specific dimensions in the img tag like
<img src="cat.jpg" alt="A Cat" width="360" height="200">
would solve the issue. Yet, due to the image being responsive, there is no way for me to predict its final height. Is there a method to prevent this behavior? Perhaps by determining the image height before loading or adjusting the scroll to reach the anchor after?