0

我正在使用运行良好的iosslider脚本，但我不知道为什么它会裁剪我的图像而不是调整它们的大小。这是我的 css 样式和 jquery 调用：

CSS：

.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;

width: 100%;
height: 300px;
}


.iosSlider .slider {
/* required */
width: 100%;
height: 300px;
}


.iosSlider .slider .slide {
/* required */
float: left;
}

我的 jQuery 调用：

$('.iosSlider').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        keyboardControls: true,
        onSlideChange: slideChange
    });

HTML：

<div class = 'iosSlider'>   
    <div class = 'slider'>
        <div class="item">
            <img src="/some_img_1.png" />
        </div>
                <div class="item">
            <img src="/some_img_2.png" />
        </div>
    </div>
</div>

知道为什么我不能让我的图像调整到 300 像素的高度吗？原件高 600 像素，因此它们被切成两半。我确定这是一个 CSS 问题，但我似乎无法找到它。有什么想法吗？

4

1 回答 1

1

您的 CSS 规则仅对包含图像的 div 应用高度。如果您希望图像大小为 300 像素高，请添加如下规则：

.iosSlider .slider .item img {
   height: 300px;
   width: auto;
}
于 2012-12-03T04:48:35.927 回答