Bagaimana untuk mendapatkan lebar dan ketinggian sebenar imej dengan kemahiran js dan jquery_javascript

1. Bilakah anda perlu mendapatkan lebar dan ketinggian sebenar imej

Apabila membuat laman web PC, kadangkala anda akan mempertimbangkan untuk menilai sama ada gambar itu mendatar atau menegak mengikut saiz gambar yang dimasukkan. Kemudian berikan kaedah paparan yang berbeza selepas penghakiman!

Yang lain ada di halaman mudah alih Gambar yang disisipkan dalam halaman berita selalunya dipaparkan mengikut saiz asal gambar Jika skrin telefon bimbit terlalu kecil, gambar yang terlalu besar akan melebihinya. Terdapat dua penyelesaian pada masa ini

1) Tambahkan gaya ini pada semua gambar

1

Salin kod Kod adalah seperti berikut:

.news img{margin:5px auto; paparan:blok;lebar:100%;

Tetapi masalah lain dengan kaedah ini ialah jika gambar yang dimasukkan itu sendiri sangat kecil, ia akan terus diregangkan ke paparan 100%, yang jelas tidak munasabah! Jadi inilah cara lain untuk memaparkan saiz imej secara dinamik melalui js!
2) js memperoleh saiz imej secara dinamik

cara jquery

Kod adalah seperti berikut

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 way

Kod adalah seperti berikut

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

Antara dua kaedah di atas, jquery adalah lebih mudah dan lebih cepat untuk dilaksanakan. Kaedah kedua adalah lebih rumit, tetapi ia lebih cepat untuk dilaksanakan daripada jquery!