So ermitteln Sie die tatsächliche Breite und Höhe des Bildes mit js- und jquery_javascript-Kenntnissen

1. Wann müssen Sie die tatsächliche Breite und Höhe des Bildes ermitteln?

Beim Erstellen von PC-Webseiten müssen Sie manchmal anhand der Größe des eingefügten Bildes beurteilen, ob das Bild horizontal oder vertikal ist. Geben Sie dann nach dem Urteil unterschiedliche Anzeigemethoden an!

Das andere ist auf der mobilen Seite. Wenn der Bildschirm des Mobiltelefons zu klein ist, wird er häufig in der Originalgröße angezeigt. Derzeit gibt es zwei Lösungen

1) Fügen Sie diesen Stil zu allen Bildern hinzu

1

Code kopieren Der Code lautet wie folgt:

.news img{margin:5px auto; display:block;width:100%; height:auto;}

Ein weiteres Problem bei dieser Methode besteht jedoch darin, dass das eingefügte Bild selbst, wenn es sehr klein ist, direkt auf 100 % der Anzeige gestreckt wird, was offensichtlich unzumutbar ist! Hier ist also eine weitere Möglichkeit, die Größe des Bildes dynamisch über js anzuzeigen!

2) js ermittelt dynamisch die Größe des Bildes

jquery way

Der Code lautet wie folgt

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');
}
});
});

js Weg

Der Code lautet wie folgt

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';
}
}
}
}

Von den beiden oben genannten Methoden ist jquery einfacher und schneller zu implementieren. Die zweite Methode ist komplizierter, aber schneller auszuführen als jquery!