웹 페이지의 사진의 크기는 동일합니다. 여러 그림이있는 가장 일반적인 기사 페이지에서는 그림의 크기가 일반적으로 페이지 너비와 동일합니다. 이런 식으로 페이지는 직선 원통형 모양처럼 보입니다. 이 레이아웃을 너무 많이 보면 매우 단조로운 느낌이들 것입니다. 이 상황은 주로 구식 브라우저의 한계 때문이라고 생각합니다. 그러나 최신 브라우저 (Firefox/Google/IE11)의 인기로 인해 브라우저는 페이지 디자인에 대한 제한이 적으며 웹 프로그래머의 상상력을 크게 발휘할 수 있습니다.
예를 들어, Leng Zhi : 모든 창이 나온 [x]가 어떻게 나왔는지 알고 있습니까? 이 기사에서 많은 그림이 텍스트 너비의 한계를 초과하여 사람들에게 엄청나고 비틀 거리는 느낌을줍니다. 동시에, 큰 사진이 실제 크기로 표시되어 사람들에게 더 충격적인 느낌을줍니다.
그러나 기술적으로, 우리는 텍스트의 최대 너비로 이미지를 쉽게 제한하여 모두 너비를 유지하고 텍스트 너비를 따르지 않으면 각 이미지의 크기가 필요합니다. 서버에서 편집 할 때 이미지의 원래 크기를 선언 할 수 있습니다. 보다 유연한 방법은 페이지에 JS 조각을 배치하여 이미지의 원래 크기를 동적으로 얻고 이미지의 디스플레이 크기를 동적으로 변경하는 것입니다. 이것은 이전 텍스트 최대 너비와 호환되며 필요할 때 그림을 원래 크기로 만들 수 있습니다.
JavaScript를 사용하여 브라우저 쪽에서 이미지의 원래 크기를 얻는 방법은 무엇입니까?
코드 사본은 다음과 같습니다.
var img = $ ( "#img_id"); // 내 img elem을 얻습니다
var pic_real_width, pic_real_height;
$ ( "<img/>") // CSS 문제를 피하기 위해 이미지의 메모리 사본에서 만들기
.attr ( "src", $ (img) .attr ( "src")))
.LOAD (function () {
pic_real_width = this.width; // 참고 : $ (this) .width ()는 그렇지 않습니다
pic_real_height = this.height; // 메모리 이미지에서 작동합니다.
});
WebKit 브라우저 (Google Chrome 등)는 이미지의로드 된 이벤트 후에 만 높이와 폭 값을 얻을 수 있습니다. 따라서 타임 아웃 기능을 사용하여 지연된 대기 대기 할 수 없습니다. 가장 좋은 방법은 이미지의 온부하 이벤트를 사용하는 것입니다.
CSS가 이미지의 크기에 미치는 영향을 피하기 위해 위의 코드는 계산을 위해 이미지를 메모리에 복사합니다.
페이지가 구식 페이지 인 경우 필요에 따라 페이지 하단 에이 코드를 포함시킬 수 있으며 원본 페이지를 수정할 필요는 없습니다.