Как получить отзывчивые изображения, работающие с JCrop

Я вижу некоторые решения, в которых свойство truesize используется, чтобы заставить JCrop правильно работать с отзывчивыми изображениями. Тем не менее, я с трудом получаю изображения, реагирующие в первую очередь при использовании JCrop. Если я удалю код jCrop и добавлю следующий css, изображение будет реагировать.Как получить отзывчивые изображения, работающие с JCrop

Вкратце - JCrop работает. Работает образное изображение. Но при объединении изображение не реагирует.

JSFiddle здесь: просто раскомментируйте css. http://jsfiddle.net/work77/oh5esg19/

img{ 
max-width:80%; 
max-height:80%; 
}

Очень похожий вопрос без ответа здесь: Jquery JCrop functionality on fluid images

Любые предложения? Спасибо.

источник

2014-12-14 Jim Smith

Try с:

img { 
    max-width:80%; 
    height:auto; 
} 
.jcrop-holder img { 
    max-width: none; 
}

источник

2015-04-10 14:15:14

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

Нет, вы абсолютно правы, это не отзывно. В пятницу днем :-(Но он загружает изображение в нужном размере для видового экрана во время загрузки. Но это, конечно, не вопрос. Может быть, с некоторыми обманами javascript при изменении размера окна? Я пытаюсь найти решение самостоятельно ... –

«Но он загружает изображение в правильном размере для окна просмотра во время загрузки». Хороший вопрос здесь. Я этого не замечал. Этот способ может работать и на меня. Спасибо. –

вместо установки максимальной ширины с помощью CSS вы можете ограничить ее jcrop.

$('#cropbox').Jcrop({ 
    aspectRatio: 1, 
    boxWidth: 450, //Maximum width you want for your bigger images 
    boxHeight: 400, //Maximum Height for your bigger images 
    onSelect: updateCoords, 
});

Установка и ширину рамки boxHeight будет установлен размер вашей коробки и изображение внутри будет держать его propotions.

источник

2016-07-16 14:35:29

Как получить отзывчивые изображения, работающие с JCrop

ответ

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