Question

我有以下html在bootstrap 3面板主体中显示img。

我需要将图像旋转-90度，我使用了这个问题的答案：CSS: rotate image and align top left，以便能够将旋转的图像对齐到面板的顶部。

请注意，图像是长矩形而不是正方形，因此旋转90度会大大改变宽度/高度。

<div class="panel-body">
    <div id="media_content">
        <img class="img-responsive rotate270" src="dessin-3.jpg">
    </div>
</div>

    .rotate270 {
        -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
        -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
        -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
        -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
        transform: translateX(-100%) rotate(-90deg); /* W3C */  
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;        
    }

现在，我的问题是图像被绘制在该面板的底部，因为看起来面板没有被“通知”图像的变换垂直尺寸。

我正在寻找方法让面板动态调整其高度，因为我将有一个按钮，让用户根据需要旋转图像90/180/270°。（现在我将旋转硬编码为CSS类......）

谢谢！

Answer 1

所以这里有很多代码，因为这是一个相当繁琐的转换。代码和样式会随着不同大小的图像稍微改变，但你会明白这一点。

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('password');
            $table->boolean('confirmed')->default(0);
            $table->string('confirmation_key')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div id="box" style="border: 2px solid red;">

<img id="img1" src="https://placehold.it/350x150">

</div>

<input id="button" type="button" value="Rotate 90 deg">

您的CSS语法相同，但每次轮换的值都不同。

JSFiddle：https://jsfiddle.net/a11sters/1/

如果您有任何问题，请发表评论。

使用CSS在Panel中旋转img并让面板更新其高度

1 个答案: