画像がoverflowしません

いつもお世話になります。

CSSスプライトを作るために、下記のようなコードで横長画像の左8分の1だけを表示させたいのですが、どうしても画像全体が縮小されて表示されてしまいます。
試しに同じコードで、Wordpressを離れて静的ページで作ってみましたら、うまく左8分の1のみ表示されました。
何が原因かご存知の方がいらっしゃいましたら、ご教示くださいますようお願いいたします。

<!-- HTML -->
<div class="imgWrap">
<div class="img">
<img src="http://example.com/img/img1.jpg" alt="">
</div>
</div>

/* CSS */
.imgWrap .img {
width:100%;
overflow:hidden
}
.imgWrap .img img{
display:block;
margin:0;
width:800%;
height:auto
}