Setting up square image as background

Question

I have square image and I need to set that image as background. But I need that image to render differently in portrait and landscape mode.

As shown in the picture, the same image should be applied for both landscape and portrait but each should show different part of the image maintaining the same pivot point. The black dot in the image represents the pivot point.

Is it achievable with the same image? I can do with two different images.

Is it achievable with svg image?

Answer 1

Assuming you are actually using an SVG image for your image...

All you should have to do is:

1. provide an appropriate viewBox
2. set the SVG to preserveAspectRatio="xMidYMid slice". This setting is equivalent to CSS background-zise: cover.

Demo

svg:nth-child(1) {
  width: 300px;
  height: 150px;
}

svg:nth-child(2) {
  width: 150px;
  height: 300px;
}

<svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice">
  <image xlink:href="https://i.stack.imgur.com/iF2FB.png" width="300" height="300"/>
</svg>

<svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice">
  <image xlink:href="https://i.stack.imgur.com/iF2FB.png" width="300" height="300"/>
</svg>