调整大小和CSS

旋转代码：调整大小和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的区域。如果它是一张比它的高度宽的图片，那么所有的图片都可以像我喜欢的那样工作，但是如果它的高度大于它的宽度，它会在旋转它之前改变它的大小，这会使图片比我的图片小得多，寻找。有什么办法可以做到这一点？

来源

2016-06-28 TiggerToo

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

这将有助于只旋转必要的图像（其宽度较大），而其他人将被放在与原始尺寸。

来源

2016-06-28 20:06:00

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

来源

2016-06-28 19:49:02 user31415

我试过改变顺序并嵌套它们，但是不行。 – TiggerToo

调整大小和CSS

回答

相关问题