代码:
<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/