Question

我正在使用效果很好的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 Call：

$('.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>

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

Answer 1

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

.iosSlider .slider .item img {
   height: 300px;
   width: auto;
}

为什么我的图像会被裁剪？

1 个答案: