月別: 2010年12月

簡単ですが、一応まとめましょう。

元の画像はこちら↓

中央の笑顔のみ表示したい場合は、外側に広さと高さが決まった親ボックスに「overflow:hidden;」を適用し、インナーを1つ挟めばOKですね。

具体的には：

できました(^^)

ソースは下記のようになります：

CSSの部分：
div#imgContainer {
  position: relative;
  width: 67px;
  height: 67px;
  overflow: hidden;
}
div#imgContainer #imgInner {
  position: relative;
  width: 128px;
  height: 128px;
  left: -30px;
  top: -25px;
}
div#imgContainer #imgInner img {
  position: relative;
  width: 100%;
}

HTMLの部分：
<div id="imgContainer">
  <div id="imgInner">
    <img src="画像のパス">
  </div>
</div>