CSS变换和最大高度

Question

我的图像有css max-height和max-width set

我添加了一个旋转图片的链接。

所以jQuery代码看起来像

rotate = rotate - 90;
$("#thumbnail1").css('transform','rotate(' + rotate + 'deg)');

这部分有效，

但是当它旋转时，它会忽略最大高度

这是一个显示当前发生情况的屏幕截图

我想要发生的是，图像不应该在背景边界之外。

下面是相关代码和css

＆＃13;

＆＃13;

.thumbouter {
    width: 191px;
    height: 145px;
    margin-right: 5px;
    margin-bottom: 35px;
}

.thumbouter .thumbnail {
    margin-bottom: 0px;
}
.thumbnail {
    width: 191px;
    height: 146px;
    position: relative;
}
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

#thumbnail1 {
    display: block;
    max-width: 182px;
    max-height: 137px;
    overflow: hidden;
}

＆＃13;

<div class="thumbouter pull-left"> <span class="thumbnail"> <img id="thumbnail1"   src="1467075448.jpg" data-holder-rendered="true" style="display: block;"> </span><span class="rotate-left" data="1">L</span><span class="rotate-right" data="1">R</span></div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle here

Answer 1

这是因为当您旋转90度时，您希望将max-width设置为适合容器的高度，而不是max-height，因为您的图像现在转向侧面。

试试这个：

var maxWidth = $("#thumbnail1").css('max-width');
var maxHeight = $("#thumbnail1").css('max-height');
rotate = rotate - 90;
$("#thumbnail1").css({
    'transform':'rotate(' + rotate + 'deg)',
    'max-width': maxHeight,
    'max-height': maxWidth
});

Answer 2

您需要应用css属性 Overflow:hidden到.thumbnail div。

检查以下小提琴，

JSFiddle Here