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";

    }

    }

    }

  • 相关阅读:
    NOIP 2012 T5 借教室 [洛谷P1083]
    POJ2437 Muddy roads
    POJ2288 Islands and Bridges
    洛谷P2014 TYVJ1051 选课
    POJ1741 Tree
    CODEVS1995 || TYVJ1863 黑魔法师之门
    TYVJ1939 玉蟾宫
    TYVJ1305 最大子序和
    POJ1737 Connected Graph
    TYVJ1864 守卫者的挑战
  • 原文地址:https://www.cnblogs.com/zwdeblog/p/9201393.html
Copyright © 2011-2022 走看看