<div class="preferably-square"></div>
<img class="preferably-square" src="https://source.unsplash.com/random/800x600?iran" alt="">
body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.preferably-square {
  width: 300px;
  aspect-ratio: auto 1 / 1; 
}

div {
  background-image: linear-gradient(90deg,#ec4899,#ef4444,#f59e0b);
}

img {

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.