JS web image by scale adaptive scaling method

  • 2020-03-30 01:21:53
  • OfStack

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.

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201401/2014115143443930.png" >

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

Related articles: