调整图像大小？答案

【问题标题】：Resize the images?调整图像大小？
【发布时间】：2013-07-16 13:37:26
【问题描述】：

我有一些图片：

<div id="slider" class="nivoSlider">
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
</div>

基本上它们的大小约为 600x450。我对它们应用了 CSS。

.nivoSlider img
{
   height: 450px;
   width: 600px;
   margin-left: 25px;
}

我想制作幻灯片，然后我选择了 nivoSlider 插件。

$(document).ready(function () {
        $('#slider').nivoSlider({
            effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 300, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: true, // Next & Prev navigation
            controlNav: true, // 1,2,3... navigation
            controlNavThumbs: false, // Use thumbnails for Control Nav
            pauseOnHover: true, // Stop animation while hovering
            manualAdvance: false, // Force manual transitions
            prevText: '<<', // Prev directionNav text
            nextText: '>>', // Next directionNav text
            randomStart: false, // Start on a random slide
            beforeChange: function () { }, // Triggers before a slide transition
            afterChange: function () { }, // Triggers after a slide transition
            slideshowEnd: function () { }, // Triggers after all slides have been shown
            lastSlide: function () { }, // Triggers when last slide is shown
            afterLoad: function () { } // Triggers when slider has loaded
        });

我的问题是如何在浏览器宽度改变时动态改变大小？

【问题讨论】：

您听说过响应式网页设计吗？ :) designmodo.com/responsive-design-examples
nivoSlider 应该是响应式的，我想您应该查看their documentation 以正确实现它。
是的，我的错，它支持响应式。

标签： jquery css responsive-design nivo-slider

【解决方案1】：

使用此滑块...它完全响应且易于编辑:)

http://flexslider.woothemes.com/

【讨论】：

【解决方案2】：

目标window的大小调整功能。

window.onresize = function() {
    document.getElementByTagName('img').style.width -= "5px"; //decrease it every time
    document.getElementByTagName('img').style.height -= "5px"; //decrease it every time
}

阅读更多关于onresize@window.onresize : MDN的信息。

作为旁注，我提供了一个纯 JS 解决方案，因此您的服务器上的负载不会增加。 :)

【讨论】：