1

私の単純なdiv要素は次のとおりです。

<div class="avatar">
  <img src="http://quickshare.my3gb.com/download/testpic.jpg" />
</div>

(元の画像は 216 * 216 ピクセルです) 、私の CSS は次のとおりです。

.avatar {
float: right;
border: 1px #ccc solid;
width: 70px;
height: 80px;
overflow: hidden;
position: absolute;
}

そしてフィドルhttp://jsfiddle.net/BMU4Y/2/

問題は、画像が存在する div に収まるように画像を取得できないことです。

どんな助けでも大歓迎です。[jquery image-resizer も試しましたが、実際に機能するものは見つかりませんでした :( ]

これは、C# と MVC 4 で構築された HTML 5 Web サイト用です。

4

7 に答える 7

4

ここではオーバーフローは必要ありません。画像を div に合わせるには、高さと幅を 100% にする必要があります。

.avatar {
float: left;
border: 1px #ccc solid;
width: 70px;
height: 80px;
position: relative;
}
.avatar img {
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/BMU4Y/3/

于 2013-10-15T11:08:04.663 に答える
1

画像を明示的にサイズ設定された div 内に収めたいと理解している場合は、css に次を追加すると機能します。

.avatar img {
    height: 100%;
    width: 100%;
}
于 2013-10-15T11:08:54.210 に答える
1 
  .avatar 
    {
        float: left;
        border: 1px #ccc solid;
        overflow: hidden;
        width:60px;
        height:60px;
    }

    .avatar img {
        width:inherit;
        height:inherit
    }
于 2013-10-15T11:09:28.413 に答える