HTML + JavaScript : 동적 이미지 크기 조정?
-
21-08-2019 - |
문제
나는 일부를 얻으려고 노력하고있다 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 쇼 스토퍼입니다.
모든 브라우저 에서이 작업을 수행 할 수있는 방법은 무엇입니까? 미리 감사드립니다.
해결책
나는 직장에서 사파리를 본 적이 없지만, 당신은 당신의 온부하 이벤트를 이것으로 바꿀 수 있습니다.
onload="resize_image(self.id);return true"
반환 값이 없으면 Safari는이 객체를로드해서는 안된다고 생각합니다.
다른 팁
IE6 CSS+JavaScript 해킹을 사용하십시오.
.dynamic_img {
width: expression(document.body.clientWidth <= 800? "auto" : "800px");
max-width: 800px; //For normal browsers
}
ID없이 :
...
function resize_image( img )
{
//var img = document.getElementById( id );
...
<img onload="resize_image(this);" src="IMAGE.JPG" width="800" />
원숭이를 사용해 보셨습니까? img.style.width
? 또한 2 개의 조건 각각에 대해 2 개의 CSS 클래스를 사용해 볼 수 있으며 프로그래밍 방식으로 변경할 수도 있습니다.
제휴하지 않습니다 StackOverflow