CSS : 이미지의 위치를 ​​수정하는 방법

Question

많은 포럼에 있었지만 누구도 대답을 줄 수 없습니다. 이 사이트는 나의 마지막 기회입니다.

자바 스크립트를 기반으로하는 이미지 뷰어가 있습니다. 이미지의 열 (JS cound는 php/mysql 행 수에 따라 다름)이 있으면 특정 수입니다. 이제 출력에는 두 줄의 이미지 세 열이 있습니다. 나는이 최대 화면 해상도를 가질 때 나는 시청자가 어떻게 보이는지 확인이 링크를 열 수 있습니다

http://jsfiddle.net/5mfbM/22/

이미지 축소판이다. 선에서 세 번째 축소판 위로 마우스를 이동하면 이미지 자체가 확대됩니다. 이미지 크기에 따라 CSS 위치 지정으로 이미지의 위치를 ​​오른쪽 또는 왼쪽으로 수정합니다. 그래서 이미지는 창/화면의 내부 크기 안에 머무를 수 있습니다. 따라서 첫 번째 줄의 위치에 있어야합니다. 하지만 이미지가 왼쪽으로 다음 줄로 건너 뜁니다 (이미지를 숨기려면 onmouseout 이벤트가 있기 때문에 이미지가 깜박입니다). 다음 줄에서 점프를 멈추고 CSS 규칙에서 상대 위치를 무시하는 방법을 묻습니다. 나는 이미지에 충분한 공간이 있는지 확인하기 위해 부모 다이브를 넓게 만들었습니다.

편집 :

Image 1

Image 2

Image 3

그리고 이미지 2 같은 링크하지만 "viu1319790616v.jpg : 나는 당신에게 스타일을 보여 불을 지르고 CSS의 debuger에서 이러한 이미지를 가지고 " 이미지 3 링크가 동일하지만"bwy1319790927w.jpg "

Answer 1

CSS에서 확대/축소 속성을 사용해보세요. 큰 코드는 피할 수 있습니다.

Answer 2

나중에 원래 코드에서 onload = setImages()를 제외 시켰습니다. 나는 왜 그런 짓을했는지 기억하지 못합니다. 그러나 이것은 저와 같았습니다. 차이점은 jsfiddle 예제가 아닙니다. 22가 올바르게 작동하지 않았습니다. 따라서 여기에 onload 이벤트가없는 새로운 업데이트가 있습니다. example #24 이 아이콘은 원래 크기로 thumnnail을 가져옵니다.

이 코드는 jsfiddle에서 제대로 작동하는 것 같습니다 (최대 너비를 얻기 위해 창/프레임을 막대를 확장 할 경우 창/프레임),하지만 원래의 코드에 컴퓨터 ...