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

시도 :

이

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

출처

2015-04-10 14:15:14

Mattias, 위의 피들에서 코드를 시도했지만 슬프게도 이미지는 여전히 반응이 없습니다. 해보려고했는데 뭔가 빠졌어? –

아니요, 당신은 절대적으로 옳습니다. 반응이 없습니다. 금요일 오후 :-(.하지만로드 할 때 뷰포트에 맞는 크기로 이미지를로드합니다. 물론 질문이 아닙니다. 어쩌면 창 크기 조정 이벤트에 대한 자바 스크립트 트릭이 있습니까? 직접 솔루션을 찾으려고합니다. ... –

"로드 할 때 뷰포트의 이미지를 올바른 크기로로드합니다."여기에 좋은 점이 있습니다. 실제로이 점을 알아 채지 못했습니다.이 방법으로도 나에게 도움이 될 수 있습니다. 감사합니다. –

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, 
});

설정 상자 너비와 상자 높이는 상자 크기를 설정하며 내부 이미지는 그 속성을 유지합니다.

출처

2016-07-16 14:35:29

JCrop으로 반응하는 이미지를 얻는 방법

답변

관련 문제