2014-02-15 2 views
0

Я хочу использовать flux slider для веб-сайта, который я создаю ... Все работает отлично, за исключением того, что я не могу изменить размер изображения ... Я пробовал следующий jqueryКак изменить размер изображения с помощью флип-слайдера

$(function(){ 

if(!flux.browser.supportsTransitions) 
alert("Flux Slider requires a browser that supports CSS3 transitions"); 

window.f = new flux.slider('#slider', { 
pagination: true, 
width: 300, 
height: 300, 
transitions: ['bars3d'] 

}); 

}); 

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

+0

Можно ли добавить html/css? –

ответ

0

Возможны три проблемы (не уверен, что вы не добавили html/css r скрипку);

1) Вы изменяете размер контейнера с изображениями, где вы установили height и width изображениям, например. <img src="blahblah.jgp" height="900" width="500" /> удаление height/width исправить проблему.

2) Во-вторых, проверьте, нет ли каких-либо css, не создающих js для переопределения i.e. Вы используете !important с изображениями css (высота/ширина), применяемыми к изображениям.

3) И последнее, но не менее важное: попробуйте это дополнительно установить контейнер изображений height/width через js, который вы уже делаете, это сделает изображения автоматически подходящими для их контейнера.

img{ 
    max-width: 100% !important; 
    height:auto 100% !important; 
    display:block 100% !important; 
} 

Также стараюсь добавить! Важно с вашим js тоже. мы надеемся, что любой из них будет работать на вас.

удачи

1

Изменение высоты до 0 и настройки вашей ширины к отрицательному должны это сделать.

$(function(){ 
    if(!flux.browser.supportsTransitions) 
     alert("Flux Slider requires a browser that supports CSS3 transitions"); 
    window.f = new flux.slider('#slider', { 
     pagination: true, 
     width: -300, 
     height: 0, 
     transitions: ['bars3d'] 
    }); 
});