Позиция img горизонтальный центр и скрыть переполнение

Question

У меня есть изображение размером 133px X 320px (h X w) , и я хочу, чтобы он показывался в коробке высотой: 185px , поэтому изображения увеличиваются, но ширина окна динамична;

так как я мог настроить свой img, чтобы быть центрированным в поле, а не по умолчанию, выровненным влево.

текущий код

#container { 
    width: 30% 
} 

.card-image { 
    overflow:hidden; 
    height: 185px; 
    border: solid; 
} 
.card-image img { 
    height: 100%; 
    width: auto; 
} 

или plnkr

, поэтому я хочу, чтобы увидеть центр placehold.it в поле, даже если размер экрана

с помощью materializecss из они есть вариант, о котором я не знаю :)

И если возможно, если ширина ширины больше, чем высота, то изображение получится полным w IDþ и переполнения сверху и снизу

Answer 1

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

.containerParent { 
    width: 185px; 
    padding-bottom: 185px; 
    height: 0; 
} 

и ваш образ в этом Div с:

.image { 
    position: absolute; 
    margin: auto; 
    top: -500%; 
    bottom: -500%; 
    left: -500%; 
    right: -500%; 
    display: block; 
} 

и либо fitWidth:

width: 100% 

или fitHeight:

height: 100%; 

там вы идете. центрированные изображения масштабируются всегда до вашего родительского контейнера

jsfiddle: http://jsfiddle.net/bn94yrj7/

Answer 2

Если меня не недопонимания вас, то вы можете использовать CSS и фон-размер: крышку для достижения этой цели влияет

Посмотреть пример здесь: https://jsfiddle.net/rrjpca5d/

.box { 
    height: 133px; 
    width: 320px; 
    background: url(http://theludonarrative.com/wp-content/uploads/2014/03/2014-03-11_00010.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 3

Fixed его:

#container { 
    width: 50%; 
    max-width: 350px; 
} 

.card-image { 
    height: 185px; 
    position: relative; 
    overflow: hidden; 
    border: solid; 
} 

.card-image img { 
    position: absolute; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin: auto; 
    height: 100%; 
}