zoukankan      html  css  js  c++  java
  • 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中

    function adjustImg(){

    let imgDiv = document.getElementsByClassName("img");//找到img标签外面的class 名为img的div盒子

    for (let i = 0; i < imgDiv.length; i++){

    // console.log(i);

    let obj = imgDiv[i].getElementsByTagName("img")[0];

    if (obj.complete) {//确保图片已经加载完成

    let imgH = obj.offsetHeight;

    let imgW = obj.offsetWidth;

    let img_scale = imgW/imgH;

    let boxH = obj.parentNode.offsetHeight;

    let boxW = obj.parentNode.offsetWidth;

    let box_scale = boxW / boxH;

    // console.log("imgH="+imgH+" imgW="+imgW+" boxH="+boxH+" boxW="+boxW);

    if(box_scale > img_scale){

    obj.style.width = "100%";

    imgH = obj.offsetHeight;

    imgW = obj.offsetWidth;

    let h = (imgH-boxH)/2;

    obj.style.marginTop = -h + "px"; //确保图片垂直居中

    }else{

    obj.style.height = "100%";

    imgH = obj.offsetHeight;

    imgW = obj.offsetWidth;

    let w = (imgW-boxW)/2;

    obj.style.marginLeft = -w + "px";

    }

    } else {

    obj.onload = function(){

    let imgH = obj.offsetHeight;

    let imgW = obj.offsetWidth;

    let img_scale = imgW/imgH;

    let boxH = obj.parentNode.offsetHeight;

    let boxW = obj.parentNode.offsetWidth;

    let box_scale = boxW / boxH;

    // console.log("imgH="+imgH+" imgW="+imgW+" boxH="+boxH+" boxW="+boxW);

    if(box_scale > img_scale){

    obj.style.width = "100%";

    imgH = obj.offsetHeight;

    imgW = obj.offsetWidth;

    let h = (imgH-boxH)/2;

    obj.style.marginTop = -h + "px";

    }else{

    obj.style.height = "100%";

    imgH = obj.offsetHeight;

    imgW = obj.offsetWidth;

    let w = (imgW-boxW)/2;

    obj.style.marginLeft = -w + "px";

    }

    };

    // obj.style.height = "100%";

    // obj.style.margin = "0 auto";

    }

    }

    }

  • 相关阅读:
    [leetcode] LRU Cache @ Python
    [leetcode]Swap Nodes in Pairs @ Python
    [leetcode]Add Two Numbers @ Python
    [leetcode]Candy @ Python
    [leetcode]Gas Station @ Python
    [leetcode]Plus One @ Python
    接口测试-压力-Jmeter继续使用
    移动互联网应用测试,推荐两本书
    Android dumpsys 内存分析
    内存泄露分析之MAT工具简单使用
  • 原文地址:https://www.cnblogs.com/zwdeblog/p/9201393.html
Copyright © 2011-2022 走看看