0

div (200x200 の正方形) があり、その中に 180x60 の画像を配置し、次にテキストを配置します。

<div class='box_item'>
    <img src="<? echo base_url(); ?>img2/avengers_assemble_small.jpg" class='box_item_img'/>
    <h4>some text...</h4>
</div>

CSS は次のとおりです。

.box_item {
    float: left;
    height: 190px;
    width: 190px;
    overflow: hidden;
    border: 1px solid grey;
    padding: 5px;
    margin: 5px 5px 0px 0;
}
.box_item_img{
    width: 180px;
    height: 60px;
    margin: 5px;
}

box_item_img クラスで指定された寸法で画像がボックスの上部に表示されることを期待します。代わりに、ボックスのほぼ全体に拡大する引き伸ばされた画像を取得します (上部と左側に 5 ピクセルの余白が残ります)。

アイデア？

4

1 に答える 1

0

あなたが与えたCSSルールはうまく機能しています。一般的なルールなど、他のスタイリング ルールが干渉している必要がありますimg。

FireBug または Chrome 開発者ツールの要素imgと要素を調べて、それぞれに適用されるルールを確認してください。div次に、最も疑わしいルールを 1 つずつ削除して、本当の原因を見つけます。

于 2012-04-22T18:44:46.120 に答える