HTML + Javascript: динамическое изменение размера изображения?
Я пытаюсь заставить 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, который является ограничителем шоу.
Как я могу заставить это работать во всех браузерах? Спасибо заранее.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Используйте взлом IE6 css + javascript:
.dynamic_img {
width: expression(document.body.clientWidth <= 800? "auto" : "800px");
max-width: 800px; //For normal browsers
}
Хм, я только что проверил это и угадаю, это выражение вычисляется для любого возможного события. И я был наивен, полагая, что его оценивают только один раз ...
Вы пробовали обезьяну с img.style.width? Вы также можете попробовать создать по 2 класса CSS для каждого из двух условий и программно изменить их.
Я никогда не видел сафари в работе, но вы можете попробовать изменить свое событие onload на это:
onload = "resize_image(self.id);return true"
Может случиться так, что без возвращаемого значения safari считает, что этот объект не должен загружаться.
Без идентификатора:
...
function resize_image( img )
{
//var img = document.getElementById( id );
...
<img onload = "resize_image(this);" src = "IMAGE.JPG" width = "800" />
Это снижает производительность, поэтому на странице их не может быть много.