10

ウィンドウの高さの変化に合わせて画像のサイズを変更したいのですが、含まれている div シュリンクが画像をラップしたままにします。私は使用してみました：

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline-block;
}

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

しかし、期待どおりに機能していないようです。div縮みません。デバッガーでcssプロパティをいじると、実際にそうなります。

これがフィドルです（結果パネルのサイズを変更してみてください）

アップデート：

今、これは奇妙です。この質問を最初に投稿してから、ブラウザの動作が変わりました。もともと（Chrome）ウィンドウのサイズを変更すると、イメージは予想どおりに比例して縮小されましたが、ラッピング div は元の幅を維持していました。現在何が起こっているか (Chrome の更新?) は、画像が水平方向に縮小されず、div も縮小されないことです。

最新のSafariとFirefoxで試してみました。どちらも画像を縮小しますが、元の div 幅を維持します。そのため、他のブラウザでも解決策を確認してください。

更新 #2:

画像の隅に他の要素を配置する必要があるため、div はブロック タイプのままにする必要があります。

4

9 に答える 9

3

画像max-heightを 100% 維持する必要があります。それでおしまい。

これが実用的なソリューションです

HTML:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline;
}

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

編集

画像が完全な div に収まるようにクラスを更新CSSしました。editimgの実用的なソリューションは次のとおりです。

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    display:block;
}

お役に立てれば。

于 2013-05-24T05:38:02.370 に答える
1

div私はあなたのフィドルを少し試しましたが、幅を変更する内部の画像の幅に基づいてブラウザが幅を変更するとは思いません。いくつか試してみましたが、取得できませんでした仕事。

ただし、自動サイズ変更画像の隅に要素を配置する別の方法を提案できます。これらの要素をdiv画像を保持している 内に配置する代わりに、画像をフロートdivさせ、固定幅の を画像の左右にフロートさせてから、それらをdiv画像に切り込むことができます。それらにいくつかの負のマージンを設定します。

jsFiddleこのアプローチを示す例を次に示します。結果ウィンドウのサイズを変更すると (それによってメイン画像のサイズが変更されます)、画像がメイン画像の隅にとどまることがわかります。

HTML

<div class="right">
    <img src="..." />
    <img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
    <img src="..." />
    <img src="..." />
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
img {
    height: 90%;
    float: left;
}
div {
    float: left;
    width: 40px;
    position: relative;
    z-index: 1;
    height: 90%;
}
div.left {
    margin-left: -40px;
}
div.right {
    margin-right: -40px;
}
div > img {
    padding: 3px;
    border: 2px dashed blue;
    width: 30px;
    height: 30px;
}
div > img:last-child {
    bottom: 0px;
    right: 0px;
    position: absolute;
}
于 2013-05-30T07:36:54.133 に答える
0

画像の幅を 100% にしたいとします。これを使って。

img {
 height: 100%;
 width: 100%;
}
于 2013-05-24T05:44:27.527 に答える
0

を更新fiddleしました。Img タグの自己終了により、エラーが発生する場合があります..、

画像のサイズの高さと幅が指定されている場合、サイズも変更され、ズームイン/ズームアウトすると、対応するdivの高さが90％増加/減少します

ラッピングとサイズ変更は理解したので、これが答えであることを願っています。うまくいかない場合は返信してください..

于 2013-05-31T10:12:46.233 に答える
0

私が正しく理解していれば、画像のサイズを高さで変更したいのですが、比例したサイズを維持したいですか?

もしそうなら、これを使用してください：

img {
height: 100%;
display: inline-block;
}

display: block; を使用することをお勧めします。同様に、あなたのニーズに応じて。

フィドル: http://jsfiddle.net/zhyv9/38/

于 2013-05-31T02:05:16.630 に答える