These are chat archives for cutestrap/cutestrap

24th
Jun 2016
Paul Bovis
@bovisp
Jun 24 2016 16:58
@tylerchilds . I absolutely love this little framework. Thank you so much for all of this. I have forked your repo an am working on expanding it. One thing I did right away was write a little javascript to set images to the baseline including on resize. Here is the script I used for reference:
window.onload = function() {

    // Add a couple of attributes to each image so we can keep track of the
    // images original width and height.
    $(".img-resp").each(function() {

        $(this).attr({
               "data-image-width": this.naturalWidth,
               "data-image-height": this.naturalHeight
        });
    });

    // Set those images to the baseline
    resizeImage();

    // On screen resize, recalculate image heights so that they sit on the 
    // baseline
    $( window ).resize(function() {
        resizeImage();
    });

    function resizeImage () {
        var sw = document.body.clientWidth;

        // Check if the clientWidth is above or below 960px, the threshold
        // Cutestrap uses when setting a baseline of 24px (> 960px) and 30px 
        // (<= 960px)
        if (sw < 961) {
            var baseline = 24;
        } else {
            var baseline = 30;
        }

        $(".img-resp").each(function() {

            var origWidth = $(this).attr("data-image-width");
            var origHeight = $(this).attr("data-image-height");
            var imageAspectRatio = (origWidth / origHeight);

            // If the width of the image is less than the parent container, 
            // set image to the baseline using the image's original width 
            // and height as variables. If the width of the image is greater 
            // than the parent container, use the parent's current width 
            // instead of the original width.
            if (origWidth < $(this).parent().width()) {
                var newHeight = (origWidth / imageAspectRatio);
                var leftover = (newHeight % baseline);
                $(this).css('height', newHeight - leftover);
            } else {
                var newHeight = ($(this).parent().width() / imageAspectRatio);
                var leftover = (newHeight % baseline);
                $(this).css('height', newHeight - leftover);
            }
        });
    }
};
Not sure if this is the best solution, but it looks to work cross-browser.