I want to make the image a responsive square.
Therefore, we decided to absolutely arrange the image by specifying padding-top: 100% as the pseudo element of the parent element of the image. We thought that if we applied object-fit: cover to the image, the image would be square.
However, in fact, images that do not have enough width and height are not magnified, and it seems that object-fit is not working.
How can I create a responsive square with CSS …