Как изменить размер изображения с помощью ползунка Flux

Question

Как изменить размер изображения с помощью ползунка Flux

0

Я хочу использовать слайдер потока для сайта, который я создаю... Все работает отлично, за исключением того, что я не могу изменить размер изображения... Я пробовал следующий 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 масштабирования.
есть ли какое-нибудь решение? пожалуйста помоги.

Crazy Programmer 15 фев. 2014, в 19:45

Источник

0

Можете ли вы добавить HTML / CSS?
Aamir Shahzad 15 фев. 2014, в 20:42

Теги:

javascript

jquery

html

css

flux

2 ответа

Ещё вопросы

justin combs · Answer 1 · 2014-06-05T07-45-00.000Z

Изменение высоты до 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']
    });
});

Aamir Shahzad · Answer 2 · 2014-02-15T19-14-00.000Z

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

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

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

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

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

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

удачи