Full-width images example

It's easy to make responsive full-with images outside Bootstrap's container class. The cat above agrees.

* Container class begins *

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ex repellat harum inventore, voluptatum est veritatis quis nesciunt temporibus natus illum, vero laborum. Voluptatibus dolor quo dicta laborum quis vel explicabo tempore mollitia omnis facilis sit voluptatem repudiandae voluptatum et rerum, est magni quasi ipsam expedita illum quae laudantium, aspernatur labore.

However, when it comes to full-width images inside the .container class, it's a bit trickier.

This image is constrained within .container and is 100% wide.

Eligendi excepturi possimus eum ullam veritatis, sed beatae numquam vel et natus cupiditate cumque cum, suscipit ut iure incidunt facilis mollitia ea aspernatur voluptas ratione debitis. Sequi doloribus delectus quia non aliquam natus voluptatibus omnis culpa obcaecati fugiat magni accusamus odio cum dolorem rerum ad ratione laboriosam nihil, vitae ipsum. Iste qui id a laudantium adipisci, debitis enim, aperiam officiis sequi sapiente distinctio voluptatum placeat repudiandae labore neque nesciunt reiciendis molestiae. Alias harum aspernatur quia odit.

Let's a bit of magic and make this image always full-width regardless of .container class.

Check with any width (page reload required).

If full-width size exceeds the natural size of our image, the max natural size will be used for better UX.

How to use

// add the class ".full-width-img" to all images that you want to appear full-width $(document).ready(function(){ $(".full-width-img").wrap("<figure class='extra-wide-img'></figure>"); $("figure.extra-wide-img").each(function(item, i, arr){ if ($(this).children("img.full-width-img")[0].naturalWidth > $(this).children("img.full-width-img").width()){ var containerMargins = $(".container").css("marginRight").replace(/[^-\d\.]/g, ''); var containerPadding = $(".container").css("paddingRight").replace(/[^-\d\.]/g, ''); var calc = $(".container").width() + (Number(containerMargins) + Number(containerPadding))*2; $(this).css({"maxWidth": `${calc}px`, "margin": `1em-${Number(containerMargins) + Number(containerPadding)}px`}); } }); });

by Ilya Kushlianski