Users upload photos, the size of the photos is unknown; A preview needs to be generated, which is self-applied and centered according to the area provided to the user for preview. If the image is too large, scale it. The diagram below.

If I take a peek, I can use text-align:center; To implement. And scale to scale, using the preset < Img / > The properties of width and height cannot be solved. Because the user picture may be very long, may be very wide. I thought about their relationship online, and here’s what it looked like:

If (actual width > Preview maximum width) {       Zoom width = preview maximum width }