DIV 배경과 같이 자르기 이미지

Question

큰 텔레비전에 표시 할 시스템을 개발했습니다. 대학에서는 현재 및 향후 수업을 표시합니다. 해당 클래스가 어디에 위치하는지 식별하기 위해 name + image의 조합을 사용합니다. 아이디어는 모든 (허용 된) 사용자가 각각의 사진이있는 더 많은 강의실을 추가 할 수 있다는 것입니다.

JQuery와 PHP를 사용하여 처음 개발했습니다. 사용자는 페이지에 DIV 배경으로 표시되는 이미지를 업로드 한 다음 사용자가 크기에 맞게 이미지의 크기를 조정하고 이동할 수 있습니다.

배경 위치 css 태그는 이미지 이동에 사용됩니다. 주위, 그리고 규모에 대한 배경 크기. 시스템이 모두 웹으로 개발 되었기 때문에 모든 것이 여기서까지 훌륭하게 작동합니다.

JQuery 애니메이션 성능 문제로 인해 HTML에서 이동해야했습니다 (내 컴퓨터에서 뛰어나지 만 오래 사용할 수없는 것들). 저는 일을하기 위해 애견을 선택했습니다.

파이썬의 배경 위치와 크기를 조정해야하므로 전체 이미지가 표시되지 않습니다. 이를 위해 먼저 PHP를 사용하여 이미지를 자르고 크기를 조정하기로 결정했습니다. 행운을 빌지 않고, 나는 웹에서 독서를 한 후에 이것을 생성 할 수 있었다.

문제는 마침내; 그러나 CSS 값을 자르기 X, Y 및 Scale 값으로 올바르게 변환하는 방법을 찾을 수 없었습니다. 다르게 동작하는 것처럼 보입니다.

는 CSS 변환 : 내가하고 싶은 것을 정리해 ...

---

편집을

추신 : 나는 설명 4 개 이미지 링크를 게시하려고했지만, 불행히도 그럴 수 없어 스타일이 적용된 div를 JPG (또는 png w/e) 이미지로 변환합니다. 내가 개발 한 이미지 크기 조정/잘라 내기 주석의 링크를 확인하십시오.

---

이미지 :

• 이미지가 화면에 표시되는 : http://i.imgur.com/FMhDkKQ.png
• 원본 이미지 : http://i.imgur.com/vv4mAFN.jpg
• 이미지 PHP 처리 후 http://i.imgur.com/pm8r6q6.png
• 사용자 인터페이스는 이미지를 조정합니다 : http://i.imgur.com/2L1Zsuv.png

Answer 1

CSS를 사용하여 이미지 크기를 조정하는 주된 개념은 정말 간단합니다. 당신은 100x50의 이미지가있는 경우

는 상상, 당신은이 77 폭까지 배율을 조정하고 싶지 :

.resize-x { width: 77px; height: auto; } 

높이 : 자동 명시된 폭에 따라 이미지의 높이를 포장 할 것이다, 아니 큰 비밀 이 주위에 여기에.

은 "작물"에 관해서는

, 당신은 가짜 숨겨진 오버 플로우와 컨테이너 작물, 그리고 주위 이미지를 움직일 수 :

.frame { 
    width: x; height: x; 
    overflow: hidden; 
} 

I :

<div class="frame"> 
    <img class="resize-x" src="myimg.jpg"> 
</div> 

을하고 CSS에 대한 내가 당신의 질문에 옳은 길을 얻었는지 모르겠다. 도움이되기를 바랍니다.