모든 이미지를 비례 적으로 컨테이너에 맞게 조정하십시오

사용자가 이미지를 업로드하고 템플릿 이미지 주위로 드래그하여 원하는 결과를 얻을 수있는 사용자 정의 스크립트를 작성 중입니다. 문제는 템플릿 이미지가 1000px 이상이고 넓기 때문에 높이/너비를 제한하는 컨테이너 안에 넣습니다.모든 이미지를 비례 적으로 컨테이너에 맞게 조정하십시오

업로드 된 이미지의 크기가 정확히 동일하도록 PHP를 통해 이미지를 만들 때 left: 및 top: CSS 값을 취하여 더 큰 템플릿 이미지와 업로드 된 이미지에 적용 할 수 있습니까?

현재 CSS :

#template { 
    position: relative; 
    padding: 0; 
    width: 500px; 
    height: 500px; 
    z-index: 1; 
} 
#uploaded { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
}

출처

2012-07-24 Ed R

아이디어는 각 이미지의 50 %가 기본 높이/폭 축소하는 것입니다 귀하의 질문에 –

을 명확히하십시오. 따라서 PHP를 통해 적용 할 때 업로드 된 이미지의 픽셀 위치를 가져 와서 내 스크립트에 적용 할 수 있습니다. 원본 이미지는 누구나 조작 할 수있을 정도로 너무 커서 내 아이디어는 모든 것이 더 작게 보이게하여 내 웹 사이트에 적합하도록 한 다음 제출합니다. 픽셀 위치에 2를 곱하고 훨씬 더 큰 이미지를 만들 수 있습니다. –

미안하지만, 아닙니다. 널 따라가. 모든 이미지가 1000px x 1000px로 업로드 될 예정입니까? 존재하는 PHP 클래스 중 하나를 사용하여 확장 할 수 없습니까? –

내가 그 경우 아주 확실하지 않다 당신이 ... 어쨌든 요구하고있다 :

재산 background-size: 100% 당신의 배경 이미지가 작성되도록 지정 할 수있는 CSS3 컨테이너의 크기와 비례에 따라 늘어납니다. 함께 background-repeat: no-repeat와 당신이 찾고있는 무슨 수 있습니다 :

#uploaded { 
    height: 500px; 
    width: 500px; 

    background-image: url(...); 
    background-size: 100%; 
    background-repeat: no-repeat; 
}

데모 : http://jsfiddle.net/pu76s/3/

출처

2012-07-24 00:35:31 kay

모든 이미지를 비례 적으로 컨테이너에 맞게 조정하십시오

답변

관련 문제