gpt4 book ai didi

javascript - css, jasny fileinput - 旋转缩略图

转载 作者:太空宇宙 更新时间:2023-11-03 17:55:16 25 4
gpt4 key购买 nike

我正在尝试使用 jasny fileinput 控件实现图像缩略图预览。由于我的照片可能需要旋转,因此我添加了额外的旋转按钮。我遇到的问题是,当图像不是正方形并且旋转时,它会从缩略图空间中部分 chop 。这是 JSFiddle http://jsfiddle.net/cumqod2n/

    <div>
<button id="rotate" type="button" class="btn btn-default">Rotate <i class="fa fa-repeat"></i></button>
</div>
<br>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>

只需预览一些图像并尝试旋转它 - 明白我的意思。

编辑 1

请在此处找到更新的示例:http://jsfiddle.net/cumqod2n/4/ .正如您所注意到的,我只是将“旋转”类移动到文件输入 div。它允许我旋转图像并完全显示它。但是,我还有另一个问题 - 当图像从横向变为纵向时,它已被下面的按钮重叠。

所以我的下一个问题是 - 如何相应地调整图像下方的按钮?

最佳答案

这不是特定于 Jasny Bootstrap,而是特定于 CSS 转换。

阅读Rotated elements in CSS that affects their parent's height correctly

关于javascript - css, jasny fileinput - 旋转缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26510546/

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