CODEWITHSUNDEEP
javascriptcsshtml
user3731072
user3731072

Reputation: 11

Image responsiveness

I am using a content slider to display content on mostly mobile devices, and the majority of my content are images.

The slides of the content slider are placed inside a wrapper (.swiper-wrapper), which is set to take 100% of the screen size.

The issue I am having is that the images are not resizing correctly according to screen size and the images are cut off when I go to landscape mode. In other words, my images are not being responsive.

I tried width:100% and height:auto and it still doesn't work.

CSS

.swiper-container {

    display: block; !important;
    margin: 0 auto; !important;
    width: 100%; !important;

    background-color: #222;
    color: white;

}
.swiper-slide {

    max-width:100%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
    padding-right: 15px;
    padding-left: 15px;

}

.swiper-slide img{

    width:100% !important;
    height:100% !important;
    display:block;
}

HTML

<div class="swiper-container">
<!-- Build the content slides dynamically|databound -->
    <div id="slides" class="swiper-wrapper">
        <div class="swiper-slide">
            <img src='img/gallery-9.jpg' alt='YOLO'  />
        </div>
    </div>

    <div class="swiper-slide ">
        <div>Image 2</div>
            <img src='img/gallery-4.jpg' alt='YOLO'/>
    </div>
</div>

<script type="text/javascript" src="js/idangerous.swiper-2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container',{
    speed : 400,
    freeMode : true,
    freeModeFluid : true,
    centeredSlides : true,
    resizeReInit : true,
    resistance : '100%',
    pagination: '.pagination',
    paginationClickable: true

    });

    $(window).resize(function(){
        var height = $(window).height();
        var width  = $(window).width();
        $('.swiper-container, .swiper-slide').height(height);
        $('.swiper-container, .swiper-slide').width(width);
        //Add reInit, because jQuery's resize event handler may occur earlier than Swiper's one
        mySwiper.reInit()
    })
    $(window).resize();


</script>

Upvotes: 1

Views: 4668

Answers (3)

vinod
vinod

Reputation: 8420

Setting the below properties for the element will make the image responsive

.swiper-slide img{ max-width:100%;height:auto; }

Upvotes: 1

Indranil Mondal
Indranil Mondal

Reputation: 2857

Don't try to set both the width & height of the image. Just set any one and the other will be set accordingly depending on the aspect ration of the image.

.swiper-slide img{
    width:100% !important;

    display:block;
}

Upvotes: 0

Toothbrush
Toothbrush

Reputation: 2141

Using Normalize.css should fix that problem.

Just use this CSS if you don't want to use all of Normalize.css:

html {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
}

If that doesn't work, adding this in the head should fix it:

<meta name="viewport" content="width=device-width,minimum-scale=0.8,initial-scale=1,maximum-scale=1.2" />

This will also mostly disable zooming in/out on the page.

Upvotes: 0

Related Questions