2

我正在尝试在引导模式中放置一个简单的幻灯片。我正在使用 Cycle2 进行图像转换。这在 chrome 和 safari 中运行良好，包括移动设备。问题是图像不受 Firefox 和 IE 中模态窗口大小的限制。当我只有图像时它可以工作，但是当我用文本内容将图像包装在 div 层中时，它就会爆炸。我有 2 个只显示图像的小提琴，第二个也显示内容。

只是图片： 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>

带有内容和图像： 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>

提前感谢您的帮助！

4

1 回答 1

1

将“img-responsive”类添加到您的图像中。

于 2014-06-30T20:55:14.030 回答