How can we address the issue of blocks jumping after an image loads while still maintaining responsiveness?
Key points to consider:
- The image should resize when the window is resized.
- The maximum width of the image is its own width.
- We do not have prior knowledge of the image size.
- Javascript can be utilized to solve the problem.
Possible Solution:
If determining the exact image size is not feasible, could we instead base calculations solely on the image's aspect ratio?
By knowing the image’s aspect ratio, we can calculate the block height and embed a responsive image with some additional white space (the amount of which will be minimized on smaller screen sizes).
Image loading: https://i.sstatic.net/2SVx9.png
Image loaded: https://i.sstatic.net/acyA4.png
HTML:
import React from "react";
import "./styles.css";
const img =
"https://s3.amazonaws.com/images.seroundtable.com/google-css-images-1515761601.jpg";
export default function App() {
return (
<div className="app">
<img alt="" src={img + `?${Date.now()}`} className="img" />
<h1>I always jump down :(</h1>
</div>
);
}
CSS:
.app {
box-sizing: border-box;
}
.img {
max-width: 100%;
}
h1 {
background-color: red;
}