Центрирование негабаритного изображения в ответном div

Question

Я изучаю эту проблему в течение последних нескольких дней, и хотя нашел несколько решений, которые хорошо работают в статических макетах, у меня возникла проблема в гибком дизайне.

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

Вот что текущее исполнение моего CSS кода выглядит следующим образом:

#mainSlideshow .item img { 
    display: block; 
    width: auto !important; 
    max-width: none !important; 
    height: 350px !important; 
    overflow: hidden; 
left: 50%; 
-webkit-transform: translateX(-50%); 
-moz-transform: translateX(-50%); 
-ms-transform: translateX(-50%); 
-o-transform: translateX(-50%); 
transform: translateX(-50%); 
} 
#mainSlideshow .item .carouselImgHold {position: relative; } 

Проблема, как представляется, движение влево - прямо сейчас, изображение только смещается влево на 50% от ширины IMG (не удивительно). Как программировать CSS для дрейфа изображения только количество, необходимое для центрирования изображения в вложенном теге div?

Большое спасибо заранее.

Answer 1

Вы можете использовать выравнивание текста и отрицательные поля, если IMG стоит только на своей линии ,

http://codepen.io/anon/pen/PPpYzM

.oversizedImage { 
 
    text-align: center; 
 
} 
 

 
.oversizedImage img { 
 
    margin: 0 -100%; 
 
} 
 
/* demo purpose */ 
 

 
.oversizedImage { 
 
    width: 50%; 
 
    margin: auto; 
 
    border: solid; 
 
    box-shadow: 0 0 150px 100px white;/* you should use overflow:hidden; here it only shows how much is outside :) */ 
 
} 
 

 
.oversizedImage img { 
 
    vertical-align: top; 
 
    /* instead default baseline to avoid gap under */ 
 
    position: relative; 
 
    z-index: -1; 
 
}

<div class="oversizedImage"> 
 
    <img src="http://lorempixel.com/1200/200"/> 
 
</div>

Это всего лишь предположение, так как мы пропустили ваш HTML

Answer 2

Я думаю, вы можете достичь этого способами.

img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 

Или

img { 
    width: 50% 
    left: 50% 
} 

Answer 3

Было бы хорошо, если бы вы могли бы дать нам пример, но давайте попробуем. :)

Мое предложение - установить изображение как background-image, а не связывать его. Так что будет выглядеть так:

#mainSlideshow .item{ 
    background-image:url("path-to-image/image.jpg"); 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
} 

Таким образом, вы не растянуты изображением, закрывающее #mainSlideshow .item .read больше о том here