android - 将方形图像设置为背景

Question

我有方形图像，我需要将该图像设置为背景。但我需要该图像在纵向和横向模式下以不同方式呈现。

如图所示，横向和纵向都应应用相同的图像，但每个图像应显示图像的不同部分，保持相同的轴心点。图像中的黑点代表枢轴点。

相同的图像可以实现吗？我可以处理两个不同的图像。

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>