Question

代码：

<html>
<style>
  body {
  height: 4in;
  width: 6in;
  margin: 0;
  padding: 0.1in;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.outer {
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  background:url('some-image') center center no-repeat;
  background-size: contain;
}
</style>
<body>
<div class="outer">
  <div class="image rotate90"></div>
</div>
</body>
</html>

这里的目的是将图像设置为背景，以尽可能多地填充4x6区域。如果它的图片比它的高度宽，那么一切都像我想的那样，但如果它的高度大于它的宽度，它会在旋转之前改变尺寸，这使得图像比我的尺寸小得多。我正在寻找。有没有办法让这项工作？

Answer 1

包含一些JavaScript：

var img = document.getElementById('imageid'); //or however you get a handle to the IMG     
var width = img.clientWidth;
var height = img.clientHeight;

If(width > height) {
    $('#imageId').addClass('rotate90');
}

这将有助于仅旋转必要的图像（宽度更大），而其他图像将以原始尺寸放置。

Answer 2

尝试在图像类之前应用旋转类

调整CSS

2 个答案: