CSSのborder-radiusを使って、ほぼ画像の中心付近で丸く表示されるようにします。

結論から言うと、横長写真、縦長写真では、CSSが若干異なります。一つのCSSコードでは無理でした・・。また、IE9以下は四角になります。

横長写真の場合

4:3の横長写真を150pxの丸画像にします。

HTML

<div class="circle-box-yoko"><img alt="" src="sample-food-potato.jpg" width="600" height="420" /></div>

CSS

div.circle-box-yoko {
height: 150px;
width: 150px;
overflow: hidden;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
box-shadow: 0px 0px 0px 3px #F60;
-moz-box-shadow: 0px 0px 0px 3px #F60;
-webkit-box-shadow: 0px 0px 0px 3px #F60;
}
.circle-box-yoko img {
width: 300px;
height: auto;
margin-left: -50%;
margin-top: -25%;
}

ポイント

• 枠線をbox-shadowで表現している点です。borderで枠線を表現するとsafariではうまく表示できません。
• 画像幅を150pxの倍の300pxにして中心に持ってくるようにしています。

縦写真の場合

4:3の縦長写真を150pxの丸画像にします。

HTML

<div class="circle-box-yoko"&amp;gt;&amp;lt;img alt="" src="sample-food-potato.jpg" width="600" height="420" />

CSS

div.circle-box-tate {
height: 150px;
width: 150px;
overflow: hidden;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
box-shadow: 0px 0px 0px 3px #F60;
-moz-box-shadow: 0px 0px 0px 3px #F60;
-webkit-box-shadow: 0px 0px 0px 3px #F60;
}
.circle-box-tate img {
width: auto;
height: 300px;
margin-left: -25%;
margin-top: -50%;
}

ポイント

• イメージを調整するCSS「circle-box-tate」の内容を変更するだけです。

jQueryのMyThumbnail.jsを使って丸画像にする

MyThumbnail.jsを使うと、画像を中心にしてトリミングしてくれます。 後は、CSSで装飾すると完成です。

JavaScript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.MyThumbnail.js"/>
<script type="text/javascript">
$(document).ready(function(){
  $(".thumbnails img").MyThumbnail({
    thumbWidth:150,
    thumbHeight:150
  });
});
</script>

HTML

<div class="thumbnails">
<img src="sample-food-potato.jpg" width="600" height="420" />
</div>

CSS

.thumbnails {
height: 150px;
width: 150px;
overflow: hidden;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
box-shadow: 0px 0px 0px 3px #F60;
-moz-box-shadow: 0px 0px 0px 3px #F60;
-webkit-box-shadow: 0px 0px 0px 3px #F60;
}

まとめ

• 使用する画像サイズが一定の場合は、CSSで表現可能
• 使用する画像サイズがバラバラの場合は「MyThumbnail.js」を使用したほうが便利です