The size of the img tag is adaptive

object-fit attribute

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

By default, fill
does not guarantee to maintain the original ratio, and the content stretches to fill the entire content container.
contain
maintains the original size ratio. The content is scaled.
The cover
maintains the original size ratio. However, some content may be cut.
none
retains the length and width of the original element content, which means the content will not be reset.
scale-down
maintains the original size ratio. The size of the content is the same as either none or contain, whichever of the two results in a smaller object size.
initial
is set to the default value

————————————————
Original link: https://blog.csdn.net/qq_44423029/article/details/125257732
Reprinted: https://blog.csdn.net/qq_44423029/ article/details/125257732