CODEWITHSUNDEEP
javascriptjquerycss
Paul
Paul

Reputation: 11746

why are my images getting cropped?

I'm using the iosslider script which works great but I can't figure out why it's cropping my images instead of resizing them. Here are my css style and jquery call:

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;
}

My 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>

Any idea why I can't get my images to resize to a height of 300px? The originals are 600px high so they are being cut in half. I'm sure it's a CSS issue but I can't seem to track it down. Any thoughts?

Upvotes: 0

Views: 586

Answers (1)

Rob Grzyb
Rob Grzyb

Reputation: 785

Your CSS rules are only applying a height to the divs that contain the images. If you want the images to be sized to 300px tall, add a rule like:

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

Upvotes: 1

Related Questions