Center align my large photos, without a negative margin - html

Question

I created a tumblr theme, where everything is centered and 660px wide.
However, I also post large imagery that is 940px wide, and have been centering that by giving it a negative margin of -140px (940-660/2), but this is not ideal because I then have to post all images as this dimension, or they are just aligned way left.
Scroll to the bottom of my site to see the images that are not aligned properly: http://seans.ws
The css:
section {display: block; clear: both; margin: 0 auto;width: 660px;}
article img {clear: both; max-width: 940px; margin-left: -140px;}
Thanks for any help!

Answer 1

You can choose between these two solutions:
Markup:
<div id="content">
<div class="a"><div class="b">
<img src="http://placekitten.com/100/100">
</div></div>
<div class="a"><div class="b">
<img src="http://placekitten.com/2000/100">
</div></div>
Common css:
#content {
width: 300px;
margin: 0 auto;
border: 1px solid blue;
}
.a {
/* extend image area */
margin-left :-9999px;
margin-right:-9999px;
/* but without scrollbars */
position: relative;
left: -9999px;
}
.a .b {
/* undo scrollbar-removing positioning */
position: relative;
left: 9999px;
}
The display: table way:
http://jsfiddle.net/ZhEku/3/
.a .b {
display: table; /* shrink-wrap to content (= the image) */
width: 300px; /* content width, acts as min-width when display:table */
margin: 0 auto; /* center inside the (2*9999+300)px area */
}
The display: inline-block way:
http://jsfiddle.net/ZhEku/4/
.a {
/* center content (= the image wrapped into .b) */
text-align: center;
}
.a .b {
display: inline-block; /* shrink-wrap to content (= the image) */
min-width: 300px; /* content width */
text-align: left; /* if image is smaller than the content */
}
​Enjoy :)

Answer 2

Here's the infinite scroll js: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js
Here is my margin-left script for images larger than the default width of containers:
<!--Dynamicaly center big images-->
<script>
$(window).load(function() {
$(function() {
$('img').css('marginLeft', function(index, value){
if($(this).width() > 660) {
return -($(this).width() - 660)/2;
}
return value;
});
});
});
</script>
The only thing I need to figure out is how to do this same function on images that dynamically load because I have infinite scroll (like the bottom images are not loaded until you go down the page.