Дисплей: таблица и максимальные атрибуты

Question

Я использую карусель для начальной загрузки. Внутри этого я помещаю изображения (с неизвестной шириной и вершиной). Ширина карусели также неизвестна, поскольку страница реагирует. Значок известен, для больших экранов - 500 пикселей, а для небольших экранов - 300 пикселей.

Я хочу, чтобы центрировать изображения по горизонтали и по вертикали в карусели, для этого я использую это:

HTML

<div class="item"> 
    <div class="containerOut"><div class="containerIn"><img src...></div></div> 
</div> 

CSS

.item 
{ 
heigth: 500px; /*for small screens is 300px*/ 
position: relative; 
} 
.containerOut 
{ 
display: table; 
heigth: 100%; 
margin: 0 auto; /*for horizontal align*/ 
} 
.containerIn 
{ 
display: table-cell; 
vertical-align: middle; 
} 
img 
{ 
max-width: 100%; 
display: block; 
vertical-align: middle; 
} 

Это прекрасно работает, когда Размеры img меньше ширины и высоты. Но когда значение img превышает 500 пикселей или когда ширина img больше ширины карусели, img переполняет карусель. И я хочу изменить размер изображения, чтобы полностью войти в карусель, на больших и маленьких экранах.

Я пытаюсь установить max-width: 100% в контейнеры, но не работает, потому что атрибут display: table. Мне нужен атрибут display: table для вертикального выравнивания, потому что я пробую другие варианты, но что-то работает.

Что можно сделать, чтобы указать максимальную ширину и максимальную высоту 100% изображений карусели? Благодаря!

Answer 1

Помогло ли это plunker решить проблему?

Вот сводка изменений:

img 
{ 
width: 100%; 
} 

.item 
{ 
height: 500px; 
background: blue; /*added a color only to see the height*/ 
} 

С vertical-align уже на вашем .containerIn DIV, вы не должны также применить его к изображениям.