Question

I know that when you set an image as a background-image you can set background-size:cover

Is there a method of doing this for jQuery Cycle when the image is an actual<img>?

<div>
    <img src="image1.jpg">
</div>
Was it helpful?

Solution 2

I've done the following...

$('.aside-img div').each(function(index) {
    var imgsrc = $(this).find('img').attr('src');
        $(this).find('img').hide();
        $(this).css({
            'background-image':'url('+imgsrc+')'
        });
});

OTHER TIPS

Yes you can do it. Remember, you can cycle also divs (not only images). So just put divs in your container and set backgroundSize:cover; for them and put your images as a background.

<div id="cycleContainer"> 
    <div style="background: url(image1.jpg);"></div>
    <div style="background: url(image2.jpg)";></div>
    <div style="background: url(image3.jpg)";></div>
</div> 

#cycleContainer div {
    backgroundSize: cover;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top