CSS + jQuery：沿容器的矩形缩放、居中和旋转图像

Question

我想对 CSS（和 jQuery，如有必要）进行一些棘手的转换。

我想达到的目标：

我有一个容器 width/height 由固定像素值或百分比设置（例如：蓝色矩形，600px x 1000px）
在这个容器中，image with known original dimensions（在我的例子中，1000px x 200px）应该是
- 沿着容器的对角轴（图片中间的+）旋转，
- 放置在容器的中心（垂直、水平），并且
- 缩放不超过容器。

结果将如下所示：

CSS/jQuery 专家可以帮我解决这个问题吗？非常感谢！

Answer 1

结果应该是静态的，还是 animated/responsive，取决于 screen/box 大小？

position: absolute;
top: 50%;
left: 50%;
translate3d(-50%, -50%, 0);
transform: rotate(66deg) translate3d(-50%, -50%, 0);
transform-origin: 0% 0%;

旋转： transform: rotate(66deg);

中心点： transform-origin: 0% 0%;

居中绝对容器：

position: absolute;
top: 50%;
left: 50%;
translate3d(-50%, -50%, 0);

静态示例： http://codepen.io/anon/pen/NGwozM

:)

Answer 2

我制作了一个脚本，该脚本实际计算元素如何适合各种可能的尺寸。当您有一个元素 .fitChildren 时，它将适合所有具有 rotation 属性的子元素。

查看 this Fiddle

它接受长文本，也支持填充。

这是JavaScript

function fit () {
  $('.fitChildren').each(function(){
    var p = $(this)
    var pw = p.width()
    var ph = p.height()
    p.children('[rotation]').each(function(){
      var c = $(this)
      var cw = c.data('width')
      var ch = c.data('height')
      var ta = c.data('tan')
      var co = c.data('cos')
      var wi = pw / ((cw + (ch * ta)) * co * 2)
      var he = ph / ((ch + (cw * ta)) * co * 2)
      c.css({'transform':'translate(-50%,-50%)rotate('+c.data('angle')+'deg)scale('+(wi<he?wi:he)+')'})
    })
  })
}
$(function(){
  $('.fitChildren > [rotation]').each(function(){
    var t = $(this)
    var a = t.attr('rotation') % 360
    var rad = Math.abs(a) % 180
    if(rad > 90)rad = 180 - rad
    rad *= (Math.PI / 180)
    t.data({angle:a,tan:Math.tan(rad),cos:Math.cos(rad),width:t.outerWidth()/2,height:t.outerHeight()/2})
  })
  fit()
})
$(window).on('resize',function(){fit()})

脚本首先为具有 rotation 属性的所有元素创建内部数据。该对象存储五个属性：

角度[rotation]
角度正切
角度余弦
元素宽度
元素高度

然后当文档准备好并且发生调整大小时，将调用 fit()，它将遍历所有元素并将它们放入其父元素中。

希望对您有所帮助

CSS + jQuery：沿容器的矩形缩放、居中和旋转图像

CSS + jQuery: scale, center and rotate image along its container's rectangle

css

jquery

center

rotation

查看 this Fiddle