Центр выравнивания моих больших фотографий, без отрицательного поля

Question

Я создал тему tumblr, где все в центре и шириной 660 пикселей.

Тем не менее, я также размещаю большие изображения с шириной 940 пикселей и центрировал их, придавая ему отрицательный запас -140px (940-660/2), но это не идеально, потому что мне тогда приходится публиковать все изображения как это измерение, или они просто выровнены влево.

Прокрутка к нижней части моего сайта, чтобы увидеть изображения, которые не выровнены должным образом: http://seans.ws

CSS-код:

 section {display: block; clear: both; margin: 0 auto;width: 660px;} 

     article img {clear: both; max-width: 940px; margin-left: -140px;} 

Спасибо за любую помощь!

Answer 1

Вы можете выбрать между этими двумя решениями:

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> 

Общие 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; 
} 

display: table путь:

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 */ 
} 

display: inline-block путь:

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 */ 
} 

Наслаждайтесь :)

Answer 2

Вот бесконечные JS прокрутки: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

Вот мой запас левый скрипт для изображений больших чем ширина контейнеров по умолчанию:

<!--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> 

Единственное, что мне нужно выяснить, это сделать эту же функцию на изображениях, которые динамически загружаются, потому что у меня бесконечная прокрутка (например, нижние изображения не загружаются, пока вы не спуститесь по странице.