Better responsive images

Closes #76
This commit is contained in:
John O'Nolan 2014-01-31 14:35:24 +07:00
parent 7546018136
commit 0efa582d77
2 changed files with 74 additions and 3 deletions

View File

@ -528,6 +528,12 @@ margin on the iframe, cause it breaks stuff. */
5. Single Post - When you click on an individual post 5. Single Post - When you click on an individual post
========================================================================== */ ========================================================================== */
/* Stop .full-img from creating horizontal scroll - slight hack due to
imperfections with browser width % calculations and rounding */
.post-template .content {
overflow: hidden;
}
/* Tweak the .post wrapper style */ /* Tweak the .post wrapper style */
.post-template .post { .post-template .post {
margin-top: 0; margin-top: 0;
@ -551,12 +557,21 @@ margin on the iframe, cause it breaks stuff. */
padding: 2.5rem 0; padding: 2.5rem 0;
} }
/* Keep large images within the bounds of the post-width */ /* Keep images centred and within the bounds of the post-width */
.post-content img { .post-content img {
display: block; display: block;
max-width: 100%; max-width: 100%;
margin: 0 auto;
height: auto; height: auto;
margin: 0 auto;
padding: 0.6em 0;
}
/* Break out larger images to be wider than the main text column
the class is applied with jQuery */
.post-content .full-img {
width: 126%;
max-width: none;
margin: 0 -13%;
} }
/* The author credit area after the post */ /* The author credit area after the post */
@ -946,6 +961,18 @@ margin on the iframe, cause it breaks stuff. */
padding: 30px 0; padding: 30px 0;
} }
.post-content img {
padding: 0;
}
.post-content .full-img {
width: auto;
width: calc(100% + 32px); /* expand with to image + margins */
margin: 0 -16px; /* get rid of margins */
min-width: 0;
max-width: 112%; /* fallback when calc doesn't work */
}
.post-meta { .post-meta {
font-size: 1.3rem; font-size: 1.3rem;
} }

View File

@ -10,6 +10,50 @@
$(".post-content").fitVids(); $(".post-content").fitVids();
function casperFullImg() {
$("img").each( function() {
var contentWidth = $(".post-content").outerWidth(); // Width of the content
var imageWidth = $(this)[0].naturalWidth; // Original image resolution
if (imageWidth >= contentWidth) {
$(this).addClass('full-img');
} else {
$(this).removeClass('full-img');
}
});
};
casperFullImg();
$(window).smartresize(casperFullImg);
}); });
}(jQuery)); }(jQuery));
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');