如何使我的图像在响应时保持其方形形状并且不设置大量媒体查询？

Question

I've read several answers regarding the same question I have, but none seem to work for me. I have a form where users will be able to edit or add images. I want each image to be a square, regardless of the device (desktop, mobile, tablet). I'm not achieving this. In other answers people have recommended using width: 20vw and height: 20vh , in other posts it's been mentioned to use :after , but none are working for me. I was hoping to achieve this without having to create media queries for each screen.

This is what I need to achieve:

Here's my codepen .

Answer 1

From what I understand IF you want square images

You can make the width and height always same number

But If you always want it to same square size

you can use something like this

.square{
  width: 100px;
  height: 100px
}

OR

.square{ width: 20vw; height: 20vw; }

.square{   width: 20vh;   height: 20vh; }