gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:26:54 25 4
gpt4 key购买 nike

代码:

<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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com