將方形圖像設置為背景

Question

我有方形圖像，我需要將該圖像設置為背景。 但我需要該圖像在縱向和橫向模式下以不同方式呈現。

如圖所示，橫向和縱向都應應用相同的圖像，但每個圖像應顯示圖像的不同部分，保持相同的 pivot 點。 圖像中的黑點代表 pivot 點。

相同的圖像可以實現嗎？ 我可以處理兩個不同的圖像。

svg 圖像是否可以實現？

Answer 1

假設您實際上使用的是 SVG 圖像作為您的圖像......

您所要做的就是：

1. 提供適當的viewBox
2. 將 SVG 設置為preserveAspectRatio="xMidYMid slice" 。 此設置等效於 CSS background-zise: cover 。

演示

 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>