我需要实现图像旋转。我有一个 iframe 来加载我的图像。 我在 iframe 中有图像。
我使用 css(转换)来旋转。图像旋转但 div 未调整大小。
<div id="object_box" style="width: 1100px; height: 681px;" >
<iframe id="objframe" style="width: 1100px; height: 681px; background: transparent;" scrolling="no" src="objectload.xhtml?fid=4423"></iframe>
</div>
function rotateImg(){
angle = (angle+90)%360;
$("#im_temp_load").attr("class","rotate"+angle);
var imgWidth = "";
var imgHeight = "";
if(angle=="90" || angle=="270"){
imgWidth = $("#im_temp_load").height();
imgHeight = $("#im_temp_load").width();
}else{
imgWidth = $("#im_temp_load").width();
imgHeight = $("#im_temp_load").height();
}
$("#object_box").css({"width": imgWidth, "height": imgHeight});
$("#objframe").css({"width": imgWidth, "height": imgHeight});
}
最佳答案
感谢您的帮助。我发现了问题。我们可以通过window.parent.document访问父div
function rotateImgLeft(){
angle = (angle+90)%360;
$("#im_temp_load").attr("class","rotate"+angle);
var imgWidth = "";
var imgHeight = "";
if(angle=="90" || angle=="270"){
imgWidth = $("#im_temp_load").height();
imgHeight = $("#im_temp_load").width();
}else{
imgWidth = $("#im_temp_load").width();
imgHeight = $("#im_temp_load").height();
}
$('#object_box', window.parent.document).css({"width": imgWidth, "height": imgHeight});
$('#objframe', window.parent.document).css({"width": imgWidth, "height": imgHeight});
}
function rotateImgRight(){
angle = (angle+270)%360;
$("#im_temp_load").attr("class","rotate"+angle);
var imgWidth = "";
var imgHeight = "";
if(angle=="90" || angle=="270"){
imgWidth = $("#im_temp_load").height();
imgHeight = $("#im_temp_load").width();
}else{
imgWidth = $("#im_temp_load").width();
imgHeight = $("#im_temp_load").height();
}
$('#object_box', window.parent.document).css({"width": imgWidth, "height": imgHeight});
$('#objframe', window.parent.document).css({"width": imgWidth, "height": imgHeight});
}
关于jquery - 使用 jquery/css 旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31849316/