how to make an image height same as width css code example

Example 1: make images same size css

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

Example 2: equal height and width image css

.container {
  position: relative;
  width: 37%; /* The size you want */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}



//Credit for the great answer of "Amaury Hanser", on stackoverflow:
//https://stackoverflow.com/questions/51447317/image-height-same-as-width