브라우저의 뷰포트를 기반으로 이미지의 크기를 조정하고자를 수 있도록 내 사이트가 필요합니다. 지금까지 imagemap을 사용하여 동적으로 크기를 조정했지만 동적으로자를 수는 없습니다. 이미지를 왜곡하지 않고 동시에 자르고 크기를 조정하고 싶습니다. 내가 사용하고있는 이미지는 1920x1080 크기로 대부분의 브라우저보다 훨씬 크기 때문에 가장자리를 자르면 크기가 조정되어 다른 브라우저에서도 비슷하게 보입니다.웹 사이트에서 이미지를 자르고 확대/축소하는 방법
저는이 jQuery 플러그인을 자주 사용합니다. :) http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
그건 이미 알아 낸 것이나 크기는 비슷하지만 자르기는 없습니다. html 이미지 맵을 사용하여 큰 이미지를 사용하고 있으며 함께 크기를 조정할 수 있지만 균등하게 자르기를 원합니다. 뷰포트 크기에 따라 자르기를 원하는 정보의 980 픽셀 상자의 오른쪽과 왼쪽에 다소 넓은 공간이 있습니다. – user1238913
예제 링크가 있습니까? 나는 당신이하려고하는 것을 시각화하는 데 어려움을 겪고있다. – jonathanbell
어떻게 든 뷰포트 크기를 감지 할 수있는 것처럼 들립니다. 이미지를 자르려면 CSS 또는 자바 스크립트 만 있으면됩니다.
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
당신은
1) 음의 여백을 사용할 수 있습니다 :이 경우, 나는이 기사를 추천 할 것입니다. 2) 스마트하게 이미지를 절대 위치에 배치하십시오. 3) CSS 클립 속성을 사용하십시오.
완벽한, 감사합니다. 나는 그것을 onResize와 교차시켜야하고 그것에 약간의 수학을 던져야 할 것이다. 그러나 그것은 작동 할 것이다! – user1238913
어떻게이 이미지를 사용 하시겠습니까? 사이트의 배경 정보로? DIV에? –
기본적으로 포토샵 이미지는 사이트가 이미 이미지 맵으로 나뉘어서 "링크"가 활성화되어있는 것을보고 싶습니다. 좋은 크기로 조정할 수는 있지만 오른쪽과 왼쪽에 큰 테두리를두고 고해상도 화면을 수용 할 수 있습니다. 표준 사람을 위해 나는 가장자리가 잘려 나올 필요가있다. – user1238913