Place square svg to the center of the screen, scale it to fit the screen's width and height with some constraints

Question

It seem to be a silly question and possibly a dupe, but I couldn\'t find a good solution for a while, so finally dare to ask.

I want to place an

Answer 1

Try this css:

#picture {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 80%;
  height: 80%;
}

here is the result: https://jsfiddle.net/twe9jfkf/

is this what you try to achieve?