我可以同时使用"transform: rotate“和"background-size: cover”吗？

Question

我使用background-size: cover，有时我也使用transform: rotate，但这两者的组合不能一起工作。它保留它的原始封面大小，而不是与旋转相匹配的大小。

这里有一个小提琴演示了这个问题：https://jsfiddle.net/vkfhxmLr/4/

有只有HTML/CSS的解决方案吗？我需要避免使用javascript。

​

​

Answer 1

这是正确的(即使在你的情况下出乎意料的)行为，因为你旋转的是html元素，而不是它的背景。

可能的解决方案：

1)原图旋转(服务端)：

这需要对原始图像进行手动(或自动)转换，如果需要不同的旋转，则会产生网络开销。

在我的一个项目中，我使用pug templates (最初生成的导出静态svg文件)来生成参数化的svg文件，我可以在其中更改url中所需的任何参数。

我不确定svg是否可以用作背景图像(我猜不能)，但我有两种快速方法来获取它们:一种是检索生成的svg，另一种是通过imagemagick将其转换(并缓存)为png。

2)旋转包含的图片，而不是容器：

这稍微有点棘手，并且只适用于90度旋转，因为您需要反转尺寸并重新居中容器(我添加了一个.rotated类来处理它)。

请参阅jsfiddle example

.container.rotated {
  width:200px;
  height: 300px;
  transform: translate(50px, 0px);
}

.img2 {
  transform-origin: 50% 50%;
}

3)放大并旋转包含的图像

与之前相同，但不需要切换容器的尺寸和平移位置，只需将其设置为overflow: hidden;即可。但在这种情况下，您需要放大(并适当地居中)所包含的div，以确保它覆盖所有容器的内部空间。