Центр по горизонтали

Мне нужно центрировать горизонтальное изображение с помощью min-width: 968px в меньшем контейнере. Я могу вставить его с размером, который хочу, и отрезать его, как я хочу, с overflow: hidden ...
Я пробовал все обычные способы, и ничего не работает ...
Любые идеи?Центр по горизонтали

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

источник

2015-10-08 André Mata

Вы уже задавали этот вопрос ранее сегодня, и ответ остается тем же самым. Если у вас есть проблемы с выполнением надлежащего способа сделать это, сделайте скрипку, чтобы мы могли показать вам, как это сделать. –

@SteynvanEsveld вопрос изменился, ответ не сработал для того, что я хочу ... Итак, нет, это не тот же вопрос ... –

Содержать большое изображение в меньшем контейнере, вы должны решить, чтобы «визуально изменить размер» изображения с чем-то как:

img 
{ 
    max-width:100%; 
    height:auto; 
    dsplay:block; 
}

или в качестве альтернативы вы можете превратить его в фоне оставляя свои первоначальные размеры, но, очевидно, резка перетоки, так:

div 
{ 
    width:300px; 
    height:200px; 
    background-image:url(image.jpg) 
    background-position:50% 50%; 
}

источник

2015-10-08 15:38:01

Я уже пробовал оба, но когда я читал ваш ответ, я думал что второй вариант, который вы дали, был идеальным, если размер div был не таким же, как у img. то я вспомнил, что если бы у меня было одно изображение в качестве фона и у меня было другое с непрозрачностью 0 в div, чтобы получить переменный размер, это сработало бы отлично ... И оно ... –

Вы можете использовать для этого положение абсолютное. Не забудьте установить положение относительно родителя. Затем вы можете использовать перевод трюк, чтобы обеспечить ваше изображение будет центрирован по горизонтали и по вертикали (смотри пример):

div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
div img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div> 
 
    <img src="http://lorempixel.com/400/200/" alt="" /> 
 
</div>

источник

2015-10-08 15:42:16

Центр по горизонтали

ответ

Смежные вопросы