22

私はこのようないくつかのhtmlコードを行ってきました：

 <div class="item">
    <img src="...">
 </div>

そしてこのようなcssコード：

img {
    max-width: 100%;
    height: auto;
}

.item {
    width: 120px;
    height: 120px;
    height: auto;
    float: left;
    margin: 3px;
    padding: 3px;
}

私がやりたいのは、divの幅を使用してimgを表示し、その高さを伸ばすことです。また、divストレッチ自体をimgに合わせたいです。それは可能ですか？

4

3 に答える 3

27

あなたが探しているのはmin-heightとmax-heightです。 

img {
    max-width: 100%;
    height: auto;
}

.item {
    width: 120px;
    min-height: 120px;
    max-height: auto;
    float: left;
    margin: 3px;
    padding: 3px;
}
于 2013-03-08T17:44:11.033 に答える
1

いいえ、img を div に合わせて伸縮させ、同時に逆を実現することはできません。無限のサイズ変更ループが発生します。ただし、他の回答からいくつかのメモを取り、いくつかの最小および最大ディメンションを実装することはできますが、それは問題ではありませんでした。

画像を親に合わせて拡大縮小するか、子の画像に合わせて div を拡張するかを決定する必要があります。

このブロックを使用すると、画像サイズを可変にしたいので、親 div が画像の幅になります。 height: auto画像の縦横比をそのまま維持します。高さを伸ばしたい場合は、100%このフィドルのようにする必要があります。

img {
    width: 100%;
    height: auto;
}

http://jsfiddle.net/D8uUd/1/

于 2013-03-08T19:10:45.373 に答える
0

width:inherit画像がそのコンテナの幅を取るようにしてください<div>。比率を維持するために、高さを伸縮します。で高さを設定しないでください<div>。画像の高さに合わせてサイズが調整されます。

img {
    width:inherit;
}

.item {
    border:1px solid pink;
    width: 120px;
    float: left;
    margin: 3px;
    padding: 3px;
}

JSFiddle の例

于 2013-03-08T18:48:41.443 に答える