CSSでの画像サイズ指定について

質問

本などでCSSを練習中です。
画像サイズを自動的に指定したサイズに縮小するCSSは
ありますでしょうか？

以下のよな商品紹介のサムネイルを作りました。
画像部分は常に120×120pxに収まってほしいのですが、
横幅が高さより大きい画像を入れた場合、高さは指定した120pxになりますが(縦横比率は同じ)、横は飛び出してデザインが崩れてしまいます。
正方形の画像はそのまま120×120pxになります。
何かアドバイスをお願い致します。
また、他のおかしいところもご指摘下さい。

【HTML】
<div id="itemBox">
<div class="itemPhoto"><a href="#"><img src="#" alt="商品名" width="120" height="120" /></a></div>
<p><a href="#">商品名</a></p>
</div>

【CSS】
div#itemBox{
border: 1px solid #9f9f9f;
width: 120px;
margin: 10px;
float: left;
text-align: center;
padding: 10px;
height: 150px;
}

div#itemBox p{
float: left;
text-align:left;
width: 120px;
margin-top: 5px;
}

div#itemPhoto{
margin: 0;
padding: 5px;
text-align: center;
width:120px;
height:120px;
}

回答No.2

mame-mee

imgタグにclassで指定してみては？

お礼

ありがとうございます。いろいろと試してみます。

回答No.1

mame-mee

まず【HTML】で、idやclassで名前をつけますよね。そして、【CSS】で指定する際に、idは#、classは.で書いて指定しますよね。

要するに、【HTML】の部分で、
<div class="itemPhoto">と指定されてますので、
【CSS】の「div#itemPhoto」の部分は「div.itemPhoto」だと思いますが。試してみてください。

お礼

アドバイスありがとうございます。
「#」を「.」に変更してみましたができませんでした・・・。
まずはidとclassの違いを理解することからがんばります。
ありがとうございました。