调整图像大小以适应div +保持比例+水平和垂直+圆角中心 [英] resize image to fit in a div + keep ratio + centered horizontally and vertically + rounded corners

查看：133
本文介绍了调整图像大小以适应div +保持比例+水平和垂直+圆角中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述


$ b


  1. 调整图片的大小以适合div - 解决问题

  2. 保持比率 - 解决问题
  3. 以水平和垂直居中 - 解决问题$ / $>

  4. 圆角

    a）矩形图像 - 解决了

    b）横幅图像 - !!!因此，问题是：我如何摆脱长方形的角落图像？请看看这里看到的问题：>>> http://jsfiddle.net / infoman / 5fzET / 3 /

    换句话说：图像的角落是圆形的，但它们是不是在div的末尾，而是在它之外。我需要在div结束时对图像进行四舍五入。



    HTML 

     测试图像比例w / h = 4 
    < div> 
    < img id =myimgsrc ='http：//placehold.it/200x50'draggable =false/> 
    < / div> 
     
    < br /> 
     
    测试图像比例w / h = 0.25 
    < div> 
    < img id =myimgsrc ='http：//placehold.it/50x200'draggable =false/> 
    < / div> 
     
    < br /> 
     
    测试图像比例w / h = 1但小
    < div> 
    < img id =myimgsrc ='http：//placehold.it/50x50'draggable =false/> 
    < / div> 
     
    < br /> 
     
    测试图像比例w / h = 1完美贴合
    < div> 
    < img id =myimgsrc ='http：//placehold.it/300x300'draggable =false/> 
    < / div> 
     
    < br /> 
     
    测试图像比率w / h = 1太大
    < div> 
    < img id =myimgsrc ='http：//placehold.it/2000x2000'draggable =false/> 
    < / div>

    CSS 

      div {
     border：solid 1px green; 
     width：300px; 
     height：300px; 
     overflow：hidden; 
     border-radius：10px; 
    } 
     
     div img {
     outline：solid 1px red; 
    } 
     
     .fillwidth {
     width：100％; 
     height：auto; 
    职位：亲属; 
     / * top * / 
    } 
     
     .fillheight {
     height：100％; 
     width：auto; 
    职位：亲属; 
     / * left * / 
    } 
     
     
     .fillfull {
     height：300px; 
     width：300px; 
    }

    jQuery $ b 

      $（'img [id ^ =myimg]'）。each（function（）{
     var imgWidth = $（this）.width （），
     imgHeight = $（this）.height（），
     imgRatio = imgWidth / imgHeight，
     imgWidthTop =（（（300 / imgWidth）* imgHeight）/ 2）* -1 + 300/2，
     imgHeightLeft =（（（300 / imgHeight）* imgWidth）/ 2）* -1 + 300/2; 
     
     
     switch（true）{
     case（imgRatio === 1）：
     $（this）.addClass（'fillfull'）; 
     break; 
     case（imgRatio <1）：
     $（this）.addClass（'fillwidth'）; 
     $（this）.css（'top'，imgWidthTop）; 
     break; 
     case（imgRatio> 1）：
     $（this）.addClass（'fillheight'）; 
     $（this）.css（'left'，imgHeightLeft）; 
     break; 
     default：
     break; 
     
    ））;

    尝试&失败：
    $ b


    1. 片段： http://jsfiddle.net/infoman/5fzET/4/


    解决方案

    这是您的答案的开始。下面的代码展示了如何设置一个图像父元素的类（这是你需要的）。

      $（'img （）函数（）{
     var imgWidth = $（this）.width（），
     imgHeight = $（this）.height（），
     imgRatio = imgWidth / imgHeight，
     imgWidthTop =（（（300 / imgWidth）* imgHeight）/ 2）* -1 + 300/2，
     imgHeightLeft =（（（300 / imgHeight）* imgWidth ）/ 2）* -1 + 300/2; 
     
     // alert（imgRatio）; 
     
     switch（true）{
     case（imgRatio <1.1 && imgRatio> .99）：
     $（this）.addClass（'fillfull'）; 
     break; 
     case（imgRatio <1）：
     $ （this）.addClass（'fillwidth'）; 
     $（this）.css（'top'，imgWidthTop）; 
     //$(this).css('clip'，'rect（100px 0）100px 0）'）; 
     $（this）.parent（）。addClass（'bev'）; 
     
    reak; 
     case（imgRatio> 1）：
     //$(this).css('clip'，'rect（0 100px 0 100px）'）; 
     $（this）.addClass（'fil lheight'）; 
     $（this）.css（'left'，imgHeightLeft）; 
     $（this）.parent（）。addClass（'bev'）; 
     
     break; 
    默认值：
     break; 
    } 
    }）; 
          





     。 bev {
     border：固体1px绿色; 
     width：300px; 
     height：300px; 
     overflow：hidden; 
     border-radius：10px; 
     margin-left：10px; 
    } 
     
     div img {
     outline：solid 1px red; 
    } 
     
     .fillwidth {
     width：100％; 
    最大高度：99999px; 
    职位：亲属; 
     / * top * / 
    } 
     
     .fillheight {
     height：100％; 
    最大宽度：99999px; 
    职位：亲属; 
     / * left * / 
    } 
     
     
     .fillfull {
     height：300px; 
     width：300px; 
    }

    你可以使用不同的类来修改不同的角，或者你可以使用javascript改变样式属性。我希望这可以帮助

    The Problem:

    1. resize image to fit in a div - solved
    2. keep ratio - solved
    3. centered horizontally and vertically - solved

    4. rounded corners

      a) rectangular images - solved

      b) banner images - !!! impossiburu !!!

    So the question is: How do I get rid of the rectangular corners of the images? Please take a look at here to see the problem: >>> http://jsfiddle.net/infoman/5fzET/3/ <<<

    In other words: The corners of the image are round but they are not at the end of the div but beyond it. I need the image to be rounded at the lines where the div ends.

    HTML

    test image ratio w/h = 4
<div>
    <img id="myimg" src='http://placehold.it/200x50' draggable="false"/>
</div>

<br/>

test image ratio w/h = 0.25
<div>
    <img id="myimg" src='http://placehold.it/50x200' draggable="false"/>
</div>

<br/>

test image ratio w/h = 1 but small  
<div> 
    <img id="myimg" src='http://placehold.it/50x50' draggable="false"/>
</div>

<br/>

test image ratio w/h = 1 perfect fit
<div>
    <img id="myimg" src='http://placehold.it/300x300' draggable="false"/>
</div>

<br/>

test image ratio w/h = 1 much too big
<div>
    <img id="myimg" src='http://placehold.it/2000x2000' draggable="false"/>
</div>

    CSS

    div {
    border: solid 1px green;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
}

div img {
    outline: solid 1px red;
}

.fillwidth {
    width: 100%; 
    height: auto;
    position: relative;
    /*top*/
}

.fillheight { 
    height: 100%; 
    width: auto;
    position: relative;
    /*left*/
}


.fillfull { 
    height: 300px; 
    width: 300px;
}

    jQuery

    $('img[id^="myimg"]').each(function() {
    var imgWidth = $(this).width(),
        imgHeight = $(this).height(),
        imgRatio = imgWidth / imgHeight,
        imgWidthTop = (((300 / imgWidth) * imgHeight) / 2) * -1 + 300 / 2,
        imgHeightLeft = (((300 / imgHeight) * imgWidth) / 2) * -1 + 300 / 2;


    switch (true) {
    case (imgRatio === 1):
        $(this).addClass('fillfull');
        break;
    case (imgRatio < 1):
        $(this).addClass('fillwidth');
        $(this).css('top', imgWidthTop);
        break;
    case (imgRatio > 1):
        $(this).addClass('fillheight');
        $(this).css('left', imgHeightLeft);
        break;
    default:
        break;
    }
});​

    Try & Fail:

    1. clip : http://jsfiddle.net/infoman/5fzET/4/

    解决方案

    This is a start to your answer. The code below show how to set the class of a images parent element (which is what you need).

    $('img[id^="myimg"]').each(function() {
var imgWidth = $(this).width(),
    imgHeight = $(this).height(),
    imgRatio = imgWidth / imgHeight,
    imgWidthTop = (((300 / imgWidth) * imgHeight) / 2) * -1 + 300 / 2,
    imgHeightLeft = (((300 / imgHeight) * imgWidth) / 2) * -1 + 300 / 2;

      //  alert(imgRatio);

switch (true) {
case (imgRatio < 1.1 && imgRatio > .99):
    $(this).addClass('fillfull');
    break;
case (imgRatio < 1):
    $(this).addClass('fillwidth');
    $(this).css('top', imgWidthTop);
    //$(this).css('clip', 'rect(100px 0 100px 0)');
    $(this).parent().addClass('bev');

    break;
case (imgRatio > 1):
    //$(this).css('clip', 'rect(0 100px 0 100px)');
    $(this).addClass('fillheight');
    $(this).css('left', imgHeightLeft);
    $(this).parent().addClass('bev');

    break;
default:
    break;
}
});


     .bev {
    border: solid 1px green;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 10px;
  }

 div img {
     outline: solid 1px red;
 }

 .fillwidth {
    width: 100%; 
    max-height: 99999px;
    position: relative;
    /*top*/
 }

 .fillheight { 
    height: 100%; 
    max-width: 99999px;
    position: relative;
    /*left*/
  }


 .fillfull { 
     height: 300px; 
     width: 300px;
 }

    you could have serval different classes with differnt corners beveled or you could use javascript to change the style attributes. I hope this helps

    这篇关于调整图像大小以适应div +保持比例+水平和垂直+圆角中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆