2013-05-02 6 views
0

나는 templateemonster에서 아주 좋은 홈페이지를 보았고 내 홈페이지를 비슷하게 보이게 만들려고 노력 중이며 문제는 주 이미지입니다. 그것은 같은 방식으로 확장되지 않을 것이고 나는 무엇을 검색해야하는지 전혀 모른다. 나는 동적 인 그림을 찾았지만 아무것도 찾을 수 없다.동적 이미지 크기 조정

이미지 스크립트가있는 사이트 : http://livedemo00.template-help.com/wt_43701/#!/pageSplash 창 크기를 조정하면 이미지가 축소되고 이미지 일부가 창 밖으로 이동합니다. http://dq.se/formbar/ 메인 이미지는 하나의 TAG을 가지고 있으며, 그

width:100%;

는 내 이미지가 최소 높이가있는 방법으로 찾을 수 있도록 도와주십시오입니다 :

작업이 사이트 메신저는 500 픽셀을; 창이 작아지면 이미지가 양쪽에서 잘립니다. 당신이 min-height:500px;이 잘 경우

/악셀

+0

내가 어떤 영향을 축소보고하는 데 실패했습니다. 하지만 어쨌든 Chrome의 DevTool 또는 Firefox의 Firebug 확장 프로그램을 사용하여 페이지를 검사하고 학습 할 수 있습니다. – Passerby

+0

배경 이미지로 설정하고 ['background-size : cover'] (http://css-tricks.com/perfect-full-page-background-image/) 또는이 [jQuery plugin] (http://christianvarga.com/blog/2011/05/jquery-resize-image-to-parent-container-plugin/) 이미지가 있어야합니다. 또한 콘솔을 확인하면 코드가 오류를 반환합니다. –

답변

1

이가 500 픽셀

작은 바이올린을 축소 한 후 사진의 나머지 부분을 숨길 overflow:hidden; 시도 : here

+0

예, 제대로 작동하지만 이미지가 오른쪽으로 사라집니다. 나는 얼굴과 머리카락이 항상 집중되기를 바랍니다. 대부분의 사진은 코 끝과 머리 끝까지 "자를 수"있습니다. 사용하려 함 : 'left : 50 %;' marginleft : -50 %; 또는 그런 것. –

+0

다음 jquery 그것을 수정해야합니다. 또는 누군가 다른 사람을 알아야 할 필요가 있습니다. – DiederikEEn