js实现图片的大小自适应效果

需求是传过来一个图片,根据外层div的大小自动进行缩放效果。

function ShowSecondImg(v) {
    var rate, newX, newY,newW, newH = 0;   //表示图片相对窗口的缩放比例
    var imgW, imgH;
    var centerW = $(window).width() - $("#alarmQueue").width() - $("#presInfo").width() - 40;

    var centerH = $(window).height() - $("#detailedInfor").height()-148;
    $("#imgBoxs").find("#second").remove();
    var img = $(‘<img/>‘, { src: v.First_frame_image_url, "id": "second" });//v.First_frame_image_url

    img.prependTo(‘#imgBoxs‘);

    imgW = img.width();
    imgH = img.height();
    //获取的参数
    var rectX= parseInt(v.facerect.x);
    var rectY =parseInt(v.facerect.y);
    var rectWidth =parseInt(v.facerect.w);
    var rectHeight =parseInt(v.facerect.h);
    // alert(v.facerect.x);

    //var i = (centerW / 16 - centerH / 9) > 0 ? 0 : 1;
    var i= (centerW/centerH - imgW/imgH ) > 0 ? 0 : 1;
    if (i == 1) {
        //如果窗口宽不长,高长。以宽为准。
        rate = imgW / centerW;
        var imgRateH = imgH / rate;  //img real rate height;
        newX = rectX / rate
        newY = rectY / rate;
        newW = rectWidth / rate;
        newH = rectHeight / rate;

        $("#imgBox").width(centerW);
        $("#imgBox").css("height", "100%");
        $("#second").css({ "width": centerW, "height": imgRateH });
    }
    else if (i == 0) {
        //如果窗口宽足够长,高不长。以高为准。
        rate = centerH / imgH;
        var imgRateW = imgW * rate;  //img real rate width;
        var leftsideW = (centerW - imgRateW) / 2;    //leftside add rightside  width;
        newX = rectX * rate + leftsideW;
        newY = rectY * rate;
        newW = rectWidth * rate;
        newH = rectHeight * rate;

        $("#imgBox").height(centerH);
        $("#imgBox").css("width", "100%");
        $("#second").css({ "width": imgRateW, "height": centerH });

    }
    // $("#detailedInfor").height($(".container").height()-centerH);
    $("#faceDiv").attr(‘style‘, ‘display:block;top:‘ + newY + ‘px;left:‘ + newX + ‘px;width:‘ + newW + ‘px;height:‘ + newH + ‘px‘);

}
时间: 2024-08-11 00:44:16

js实现图片的大小自适应效果的相关文章

JS修改图片的大小

注:利用js是不能修改图片的实际大小的,修改的只是图片在标签中对应的width,height属性. 1.通过var p = document.getElementById('image')获取到对应id的DOM对象 2.再使用对象的style属性(前提是image对象已经设置过style属性),p.style.width='200px'(切记:此处是字符串,格式一定是:???px,不能只写个数字,否则在有的浏览器上图片的大小是不会改变的) 以下代码实现了每次点击按钮可以实现图片变大或缩小一点:

js插件-图片椭圆轮播效果

插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" /> <img src="images/cartoon/2.jpg" /> <img src="images/cartoon/3.jpg" /> <img src="images/cartoon/4.jpg" /&

js获取图片原始大小

摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=&quo

js 实现图片无限横向滚动效果

CSS代码如下: *{ margin: 0; padding:0;} .scroll_box { width:100%; height:110px;margin:0;overflow: hidden;white-space: nowrap;} .scroll_box img {width: 310px; height: 110px; max-width: 100%; max-height: 100%;} #scroll_start, #scroll_end, #scroll_start ul,

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

WebView加载HTML图片大小自适应与文章自动换行

http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但是对于web端来说,一个富文本编辑器就可以完美解决这个问题.所以后台很多时候会直接返回HTML代码拿给前端解析,这时,在客户端对HTML代码的处理就显得尤为

【iOS】WebView加载HTML图片大小自适应与文章自动换行

在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑 和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但是对于web端来说,一个富文本编辑器就可以完美解决这个问题.所以后台很多 时候会直接返回HTML代码拿给前端解析,这时,在客户端对HTML代码的处理就显得尤为重要了. 本文将讲解在webview加载HTML代码时,经常会遇到的图片自适应大小与文章内容自动换行问题. 示例Demo下载地址: ht

atitit.自适应设计悬浮图片的大小and 位置

#--------最好使用relate定位.. 中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:-15 负值,, #--------悬浮位置top的问题,因为相对高度.. 子能使用js解决,计算top负值.. function iniBonusPicPostion() { var mainmainxTop = $("#mainmainx").position().top; var mainxHeight = $("#mainm

基于原生js的图片轮播效果简单实现

基本效果如下: 实现了三张图片自动轮播+按键点击切换的效果. 基本思想: 图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片.所以,这里图片轮播的形式也可以采用这种方式来形成动画效果. 形式如下图: (黑框即我们的最外层的容器,充当放映机的存在:绿框就是胶片,上面搭载着很多的图片:粉框内即我们要轮播的图片) 从上图出发,我们要做到图片轮播,那么只