Question

我正在尝试在bootstrap模式中组合一个简单的幻灯片。我正在使用Cycle2进行图像转换。这在chrome和safari中运行得非常漂亮，包括移动设备。问题是图像没有受到firefox和IE中模态窗口大小的限制。它只在我有图像时才有效，但是当我用div文本内容包装图像时，它会爆炸。我有两个显示图像的小提琴，第二个显示内容。

只是图片：http://jsfiddle.net/GswZ2/1/（适用于所有浏览器）

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header</h3>

</div>
<div class="modal-body">
    <div class="cycle-slideshow">
        <img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/02/kate-upton-2013.jpg" />
        <img src="http://content.clearchannel.com/cc-common/mlib/790/03/790_1364298792.jpg" />
        <img src="http://de.wallpapersus.com/wallpapers/2012/07/Kate-Upton-Lingerie-2-1050x1680.jpg" />
    </div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
</div>

内容＆amp;图像：http://jsfiddle.net/aFmS9/4/（在IE和FF中不起作用）

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header</h3>

</div>
<div class="modal-body">
    <div class="cycle-slideshow" data-slides="> div">
        <div>
            <img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/02/kate-upton-2013.jpg" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
        </div>
        <div>
            <img src="http://content.clearchannel.com/cc-common/mlib/790/03/790_1364298792.jpg" />
            <p>ALorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
        </div>
        <div>
            <img src="http://de.wallpapersus.com/wallpapers/2012/07/Kate-Upton-Lingerie-2-1050x1680.jpg" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
</div>

提前感谢您的帮助！

Answer 1

添加＆＃34; img-responsive＆＃34;给你的图像分类。

使用bootstrap模式和cycle2在firefox中不受约束的图像

1 个答案: