Comment obtenir la largeur et la hauteur réelles de l'image avec les compétences js et jquery_javascript

1. Quand devez-vous obtenir la largeur et la hauteur réelles de l'image

Lors de la création de pages Web sur PC, vous envisagerez parfois de juger si l'image est horizontale ou verticale en fonction de la taille de l'image insérée. Donnez ensuite différentes méthodes d'affichage après jugement !

L'autre est sur la page mobile. Les images insérées dans la page d'actualité sont souvent affichées en fonction de la taille originale de l'image. Si l'écran du téléphone portable est trop petit, l'image trop grande la dépassera ! Il existe actuellement deux solutions

1) Ajoutez ce style à toutes les photos

1

Copier le code Le code est le suivant :

.news img{margin:5px auto; affichage:bloc;largeur:100%;hauteur:auto;}

Mais un autre problème avec cette méthode est que si l'image insérée elle-même est très petite, elle sera directement étirée à 100%, ce qui est évidemment déraisonnable ! Voici donc une autre façon d’afficher dynamiquement la taille de l’image via js !

2) js obtient dynamiquement la taille de l'image

façon jquery

Le code est le suivant

var _w = parseInt($(window).width());//获取浏览器的宽度
$(".new_mess_c img").each(function(i){
var img = $(this);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
$("<img/>").attr("src", $(img).attr("src")).load(function() {
/*
如果要获取图片的真实的宽度和高度有三点必须注意
1、需要创建一个image对象：如这里的$("<img/>")
2、指定图片的src路径
3、一定要在图片加载完成后执行如.load()函数里执行
*/
realWidth = this.width;
realHeight = this.height;
//如果真实的宽度大于浏览器的宽度就按照100%显示
if(realWidth>=_w){
$(img).css("width","100%").css("height","auto");
}
else{//如果小于浏览器的宽度按照原尺寸显示
$(img).css("width",realWidth+'px').css("height",realHeight+'px');
}
});
});

à la manière de js

Le code est le suivant

window.onload = function(){
function getViewSize() {//获取浏览器视口的宽高
return {
"w": window['innerWidth'] || document.documentElement.clientWidth,
(www.jb51.net) "h": window['innerHeight'] || document.documentElement.clientHeight
}
}
function getFullSize() {//获取浏览器最大的宽度
var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) +
Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) +
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
w = Math.max(document.documentElement.scrollWidth, w);
h = Math.max(document.documentElement.scrollHeight, h);
return {
"w": w,
"h": h
};
}
var _sv_w = getViewSize()["w"];
var _sf_w = getFullSize()["w"];
var _w = _sv_w;//这里用视口的宽度，具体视情况
var Imgarray = document.getElementsByTagName("img");
var realWidth;//真实的宽度
var realHeight;//真实的高度
for(var i =0;i<Imgarray.length;i++){
var imgtemp = new Image();//创建一个image对象
imgtemp.src = Imgarray[i].src;
imgtemp.index = i;//指定一个检索值，用于确定是哪张图
imgtemp.onload = function(){//图片加载完成后执行
var _stemp = this;//将当前指针复制给新的变量，不然会导致变量共用
realWidth = this.width;
realHeight = this.height;
if(realWidth >=_w )
{
Imgarray[_stemp.index].style.width = _w+'px';
Imgarray[_stemp.index].style.height = 'auto';
}
else{
Imgarray[_stemp.index].style.width = realWidth+'px';
Imgarray[_stemp.index].style.height = realHeight+'px';
}
}
}
}

Parmi les deux méthodes ci-dessus, jquery est plus simple et plus rapide à mettre en œuvre. La deuxième méthode est plus compliquée, mais elle est plus rapide à exécuter que jquery !