html - 在 CSS 中调整大小和旋转

标签 html css

代码:

<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 区域。如果它是一张比它的高度更宽的图片,那么一切都会像我想要的那样工作,但是如果它的高度比它的宽度大,它会在旋转它之前改变尺寸,这使得图像比我想要的小得多我在寻找。有什么办法可以做到这一点吗?

最佳答案

包含一些 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');
}

这将有助于仅旋转必要的图像(其宽度较大),而其他图像将以原始尺寸放置。

关于html - 在 CSS 中调整大小和旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38084922/

相关文章:

php - 使用 JavaScript 和 PHP 的动态表单问题

javascript - 如果子 LI 包含特定类,则将类应用于父 UL

css - 2 列布局 : how to make the 2 columns scrolling independently

javascript - 停靠在主页脚顶部的粘性页脚

javascript - 如何将div放在等边距上

javascript - 在 AngularJS 中保存文本区域文本

php - 如何在 div(幻灯片)和 Kiosk 数据问题上设置 setTimeout/delay

php - 将变量值从 JS 传递到 PHP

html - 仅将样式设置为选择的选项

javascript - 使用 CSS 创建平滑的粘性标题过渡