HTML + JavaScript : 동적 이미지 크기 조정?

Question

나는 일부를 얻으려고 노력하고있다 JavaScript 프로그래밍 방식으로 HTML을 조정합니다 img 다양한 크기의 이미지를 올바르게 표시하는 태그의 너비.

고정 너비가 있습니다 img 태그 800px 이미지를 표시하려면 이것이 최대 너비입니다.

이미지가 더 넓다면 800px 나는 그것을 보여주고 싶다 800px 넓은;

이미지가 더 적은 경우 800px 넓은 너비를 보존하여 스트레칭을 피하고 싶습니다.

이 html/javacript 코드를 사용하여 부분 솔루션을 얻습니다.

function resize_image(id) {
	var img = document.getElementById(id);
	var normal_width = img.width;
	img.removeAttribute("width");
	var real_width = img.width;
	if (real_width < normal_width) {
		img.width = real_width;
	} else {
		img.width = normal_width;
	}
}

<img id="myimage" onload="resize_image(self.id);" src="https://via.placeholder.com/350x150" width="800" />

위의 코드는 내가 테스트 한 모든 브라우저에서 작동하는 것 같습니다. Safari (페이지를 새로 고치지 않으면 이미지가 표시되지 않습니다).

CSS를 사용할 수 있다는 것을 알고 있습니다 max-width 그러나 그것은 작동하지 않습니다 IE <7 쇼 스토퍼입니다.

모든 브라우저 에서이 작업을 수행 할 수있는 방법은 무엇입니까? 미리 감사드립니다.

Answer 1

나는 직장에서 사파리를 본 적이 없지만, 당신은 당신의 온부하 이벤트를 이것으로 바꿀 수 있습니다.

onload="resize_image(self.id);return true"

반환 값이 없으면 Safari는이 객체를로드해서는 안된다고 생각합니다.

Answer 2

IE6 CSS+JavaScript 해킹을 사용하십시오.

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}

Answer 3

ID없이 :

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />

Answer 4

원숭이를 사용해 보셨습니까? img.style.width? 또한 2 개의 조건 각각에 대해 2 개의 CSS 클래스를 사용해 볼 수 있으며 프로그래밍 방식으로 변경할 수도 있습니다.