Установить высоту изображения с помощью JavaScript
В настоящее время у меня проблема с моим кодом. Я пытаюсь установить высоту изображения с помощью JavaScript, чтобы убедиться, что оно меньше 600 пикселей. Я пробовал множество альтернатив общему "this.height = 600", но ни одна из них не дала результата. Я очень надеюсь, что кто-нибудь поможет мне решить эту проблему.
<div id = "cursedframe">
<img src = "" id = "cursedimg">
</div>
<script>
function setImage() {
var img = new Image();
var images = [
"bean.jpg",
"xxx-edit-parallax/Images/xxx-5.jpg"
];
var chosen = images[Math.floor(Math.random() * images.length)];
img.onload = function(){
if (this.height > 600) {
console.info("more than");
this.height = 600;
console.info(img.height);
} else {
console.info("less than");
this.height = "auto";
console.info(this.height);
}
};
img.src = chosen.toString();
document.getElementById("cursedimg").src = img.src;
}
</script>
Он успешно передает if, но никогда не устанавливает высоту.
Обновлено: В то время не знал о CSS-свойствах max-height и max-width. Было доведено до моего сведения Lain. Спасибо
Ово. Это вещь? Ах, Спаситель! Думаю, можно с уверенностью сказать, что я не обращаю внимания на CSS.
Кстати, вы никогда не назначаете событие загрузки для document.getElementById("cursedimg"). Просто образ img, не относящийся к DOM, который не влияет на ваше фактическое отображаемое изображение. Вам нужно будет добавить document.getElementById("cursedimg").style.height = img.height + 'px';
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Было бы намного проще использовать свойство css max-height.
Просто чтобы показать фактический недостаток подхода в javascript: вы должны передать высоту фактическому изображению. В настоящее время вы просто устанавливаете его на объект img, но никогда не на показанный образ <img src = "" id = "cursedimg">.
var img = new Image();
var images = ['https://logosmarken.com/wp-content/uploads/2018/05/Google-Logo.png'];
var maxHeight = 200; //REM: For my test image
img.onload = function(){
if (this.height > maxHeight) {
console.info("more than");
this.height = maxHeight;
console.info(img.height);
} else {
console.info("less than");
this.height = "auto";
console.info(this.height);
};
//REM: Here you need to assign the src along with the height
document.getElementById("cursedimg").src = this.src;
document.getElementById("cursedimg").style.height = this.height + 'px';
};
//REM: No need for toString() - it already is.
img.src = images[Math.floor(Math.random() * images.length)];<div id = "cursedframe">
<img src = "" id = "cursedimg">
</div>Еще проще было бы вообще не создавать новый объект, а просто назначить его как есть:
var img = document.getElementById("cursedimg");
Запустив следующий код, вы назначаете только атрибут src элементу img
img.src = chosen.toString();
document.getElementById("cursedimg").src = img.src;
Если вы хотите установить высоту и src элемента изображения с помощью javascript, вы можете сделать следующее:
var image = document.getElementById("cursedimg");
if ( image.height > 600 ){
image.height = 600;
}
else{
image.style.height = "auto"; // since 'auto' is a styling value
}
image.src = chosen.toString();
Вы не можете просто установить
max-heightна 600 пикселей в CSS? Похоже, это примерно то, что вы здесь делаете.