美文网首页
当图片超出屏幕时,怎么使图片外部的div宽度和图片宽度一致

当图片超出屏幕时,怎么使图片外部的div宽度和图片宽度一致

作者: 是曹不是蔡 | 来源:发表于2019-09-27 10:32 被阅读0次

这个其实用jq获取图片宽度就行了,举个例子:

var img =new Image();

img.src ='images/bj.gif';这是图片的路径

var imgHeight ='';

var imgWidth='';

img.onload =function() {

imgHeight = img.height;

  imgWidth = img.width;

};

imgWidth 就是原始图片宽度;把他赋值改div就行$(div).css('width', imgWidth +'px');

但是,有时候会要图片尺寸进行改变,图片高度和屏幕显示尺寸一致,宽度自适应,这个时候图片的宽高就不是这个原先尺寸了,我们需要和屏幕尺寸对比得到比例关系。

var winHeight =$(window).height(); //浏览器当前窗口可视区域高度

var scale = winHeight / imgHeight;//比例

var newWidth = scale * imgWidth;//这就是新的图片宽度,把他赋值改div就行$(div).css('width', newWidth  +'px');

相关文章

网友评论

      本文标题:当图片超出屏幕时,怎么使图片外部的div宽度和图片宽度一致

      本文链接:https://www.haomeiwen.com/subject/qwfsyctx.html