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

Я использую bxslider для создания карусели изображений. Однако дело в том, что изображения, которые он получает для отображения, имеют несколько непредсказуемый размер. Размер контейнера 243x243. И мы знаем, что ни одно изображение не будет иметь сторону меньше 243. Итак... Я хотел бы центрировать изображение в контейнере. И либо увеличивайте масштаб, пока более короткое из двух измерений (L vs W) не заполнит контейнер в 243, а переполнение более длинного измерения будет скрыто.

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

Но у меня беда...

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

jQuery(".bx-container").each(function() {
 var img_w = jQuery(this).children("img").width();
 var img_h = jQuery(this).children("img").height();
 var pos_top = (img_h - containerHeight) / 2;
 var pos_left = (img_w - containerWidth) / 2;

 var pos_top = (243 - img_h) / 2;
 var pos_left = (243 - img_w) / 2;

 jQuery(this).children("img").css({
     'top' : pos_top + 'px',
     'left' : pos_left + 'px'
 });
});

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

jQuery(".bx-container").each(function(){

var refRatio = 1;

var imgH = jQuery(this).children("img").height();
var imgW = jQuery(this).children("img").width();

if ( (imgW/imgH) < refRatio ) { 
    jQuery(this).addClass("bx-portrait");
} else {
    jQuery(this).addClass("bx-landscape");
}
});
});

Я перепутал оба скрипта и css, но я просто не могу заставить его работать. Он либо центрируется, но не изменяет размер правильно. Или изменяет размеры, но центрирует неправильно. Или оба ошибаются.

Вот jsfiddle: http://jsfiddle.net/vgJ9X/298/

Может ли кто-нибудь помочь мне?

Спасибо!

РЕДАКТИРОВАТЬ:

Новый jsfiddle... портретные работают правильно. Пейзажные изображения по-прежнему хлюпают. :(

http://jsfiddle.net/vgJ9X/307/

РЕДАКТИРОВАТЬ: Я ДУМАЮ, что это как-то связано с относительно расположенными элементами, которые не могут перекрываться. Пытаюсь найти исправление. Если кто-нибудь знает, отредактируйте последнюю опубликованную мной скрипку.


javascript html jquery css bxslider
person user2747609    schedule 11.04.2014    source источник
comment
вот ваша обновленная скрипка... мой обновленный ответ выглядит лучше ИМХО..   -  person T J    schedule 12.04.2014

Ответы (4)


arrow_upward
2
arrow_downward 

 jQuery(".bx-container img").each(function () {
    var w = jQuery(this).width();
    var h = jQuery(this).height();
    if (w > h) $(this).addClass('bx-landscape');
    else $(this).addClass('bx-portrait');
});

Проверьте это Обновленный JSFiddle

Обновить

jQuery(".bx-container img").each(function () {
    var w = jQuery(this).width();
    var h = jQuery(this).height();
    if (w > h){
        $(this).addClass('bx-landscape');
        var trans= -243/2;
        $(this).css('-webkit-transform','translateZ('+trans+'px)');
    }
    else if(h > w){
        $(this).addClass('bx-portrait');
        var trans= -243/2;
        $(this).css('-webkit-transform','translateY('+trans+'px)');
    }
});

проверьте этот JSFiddle

Обновление обновлений

Обнаружена проблема с ландшафтом, плагин устанавливает max-width:100%;, переопределяя его с помощью max-width:none;, устраняет проблему...

Обновление обновленной скрипты

person T J    schedule 11.04.2014
comment
Однако я хочу избежать растягивания изображений. Вот почему я хочу увеличить/изменить размер таким образом, чтобы меньший край заполнил кадр, а более длинный край был просто скрытым переполнением. - person user2747609; 11.04.2014
comment
пейзажные по-прежнему «хлюпают». я также сделал новую скрипку, немного другой подход. тот же результат ... портретные работают, альбомные - нет. jsfiddle.net/vgJ9X/307 - person user2747609; 12.04.2014
comment
выглядит неплохо! Вы знаете, будет ли это работать во всех популярных браузерах? - person user2747609; 12.04.2014
comment
@ user2747609 Добавление еще нескольких строк, как в этой скрипке, заставит ее работать на всем, начиная с IE9+, moz 3.5+, chrome 4.0+ Safari 3.1+ и Opera 10.5+ проверьте полную таблицу совместимости здесь было бы мило с вашей стороны принять ответ, если он решил проблему .. ;) - person T J; 12.04.2014

arrow_upward
0
arrow_downward

Попробуй это:

img{
    position:relative;
    height:100%;
    width:300px;
}

Простая справка.

Демонстрация: http://jsfiddle.net/vgJ9X/302/

person Gadgetster    schedule 11.04.2014
comment
Это не сохраняет соотношение сторон изображений. - person brouxhaha; 11.04.2014

arrow_upward
0
arrow_downward

Я сделал пару вещей с вашим jsfiddle.

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

У вас также было несколько ошибок в вашем css. После объявления стиля img была дополнительная закрывающая скобка. Ваши объявления .bx-portrait img и .bx-landscape img были установлены на 100%px;.

Обновление:

Измените css в ваших двух классах .bx на:

.bx-portrait img {
    height: 100%;
    width: auto;
}
.bx-landscape img {
    height: auto;
    width: 100%;
}

И добавьте clearfix к вашему ul:

.bxslider:after {
    content: '';
    clear: both;
    display: table;
    padding: 0;
    margin: 0;
}

Высота обрезается, потому что .bx-viewport имеет установленную высоту 243px, но также имеет 5px border, что делает фактическую внутреннюю высоту 233px. Вам нужно сделать высоту 253px, чтобы учесть 10px границы. Вот почему они не выглядят центрированными по вертикали.

ДЕМО

person brouxhaha    schedule 11.04.2014
comment
Похоже, это меняет соотношение сторон некоторых изображений. Или мне это только кажется? Похоже, по крайней мере одно из этих изображений выглядит сплющенным. - person user2747609; 11.04.2014
comment
Ты прав. Я отредактировал свой ответ, чтобы учесть это. Добавленное решение заставляет изображения сохранять соотношение сторон и заполнять либо высоту, либо ширину в зависимости от того, что больше. Таким образом, горизонтальное изображение высотой не 243 пикселя заполнит 100% ширины li и центрируется, не заполняя высоту. - person brouxhaha; 11.04.2014
comment
Высота обрезается, потому что .bx-viewport имеет установленную высоту 243px, но также имеет 5px border, что делает фактическую внутреннюю высоту 233px. Вам нужно сделать высоту 253px, чтобы учесть 10px границы. - person brouxhaha; 11.04.2014
comment
Я приближаюсь. Я отредактировал свой, где работают портретные. А вот пейзажи - дерьмо. jsfiddle.net/vgJ9X/307 - person user2747609; 12.04.2014

arrow_upward
0
arrow_downward

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

http://jsfiddle.net/8y8df/

Если вы хотите показать полноразмерное изображение, просто удалите background-size:contain; из css.

person NoGray    schedule 11.04.2014
comment
изменяет соотношение сторон. :( - person user2747609; 11.04.2014
comment
удаление background-size:contain; заполнит область вашим изображением и обрежет его. - person NoGray; 11.04.2014
comment
я не знаю, будут ли фоны работать для меня. я просто никогда не использовал атрибут фона css для отображения галереи, с которой мне нужно будет сделать некоторые динамические вещи позже. я посмотрю на это, чтобы увидеть, если это может быть жизнеспособным. - person user2747609; 12.04.2014