javascript - 为什么我的图像被裁剪了？

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 调用:

$('.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 问题，但我似乎无法找到它。有什么想法吗？

Answer 1

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

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