clas 获取 deb 问题 网页 log CSS www.
在做 pc 网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式!
另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法
1)给所有的图片加上这样的样式
代码如下:
但是这种方式有另外一个问题就是,如果插入的图片本身就很小的话,也会被直接拉伸成 100% 显示,显然这是不合理的!那么这里就介绍另外一种方式就是通过 js 动态展示图片的尺寸!
2)js 动态获取图片的尺寸
jquery 方式
代码如下
- 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 方式
代码如下
- 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';
- }
- }
- }
- }
上面两种方法中 jquery 比较简单,实现起来比较快,第二种比较复杂些,但是执行起来比 jquery 要快!
以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索高度 图片宽度 jquery 获取真实宽度、jquery 获取真实高度、jquery 获取宽度和高度、jquery 获取高度宽度、jquery 真实高度,以便于您获取更多的相关知识。
js 和 jquery 如何获取图片真实的宽度和高度_javascript 技巧
来源: http://www.bubuko.com/infodetail-2276485.html