CSS Позиция изображения больше, чем это контейнер

Question

Так что я видел это How do I center an image if it's wider than its container? у меня есть что-то вроде этого

.section-background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    overflow: hidden; 
} 
.section-background-image { 
    position: relative; 
    right:-30%; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.section-background-image img { 

    position: relative; 
    right:-30%; 
    min-width: 100%; 
    max-width: none; 
    min-height: 100%; 
    top: 0; 
    left: 0; 
} 
    <div class="section-background"> 

     <div class="section-background-image " data-stellar-ratio="0.4"> 
     <img src="my_huge_image.png" alt="" style="opacity: 0.3;"> 
     </div> 

    </div> 

И я хочу, чтобы часть изображения право появляться, если он не помещается в контейнер , (по умолчанию его верхний левый угол).

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

Answer 1

Если не будет текста в DIV, вы можете использовать direction: rtl;

.section-background-image { 
    .... 
    direction: rtl; 
} 

Для вертикального выравнивания используйте ниже CSS

.section-background-image img { 
... 
    top:50%; 
    transform: translateY(-50%); 
} 

http://jsfiddle.net/afelixj/q4o08e8u/1/