2

問題：

  1. divに収まるように画像のサイズを変更する - 解決済み
  2. 比率を維持 - 解決済み
  3. 水平方向および垂直方向の中央揃え - 解決済み

  4. 丸い角

    a) 長方形の画像 - 解決済み

    b) バナー画像 - !!! ありえない！！！

問題は、画像の四角い角を取り除くにはどうすればよいかということです。問題を確認するには、こちらをご覧ください: >>> http://jsfiddle.net/infoman/5fzET/3/ <<<

つまり、画像の角は丸くなっていますが、div の最後ではなく、div を超えています。div が終了する行で画像を丸める必要があります。

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;
    }
});​

試行錯誤:

  1. クリップ: http://jsfiddle.net/infoman/5fzET/4/
4

3 に答える 3

0

より簡単な解決策:

デモはこちら: http://jsfiddle.net/EdHQh/

HTML:

<div class='container'>
    <img class='resize_fit_center' src='...' />
</div>

CSS:

.container {
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid orange;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
于 2013-06-26T12:58:32.173 に答える
0

試す：

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

これは、画像だけでなく div にも追加できます。

于 2012-11-05T12:47:29.020 に答える