css - divを画像サイズに調整

Question

通常、私はbackground-imageを使用して、画像の幅と高さの属性に応じて画像をdivに調整していました。今、私は正反対の問題を抱えています。

私がやろうとしているのは、画像に合わせてdivサイズを調整することですが、最大の幅と高さを使用します。たとえば、画像が200x200の場合、divはこのサイズに調整する必要がありますが、画像が300x300を超える場合は、制限する必要があります。

どのようにそれを行うべきかについてのアイデアはありますか？

Answer 1

max-widthおよびmax-heightスタイル プロパティをイメージ要素に適用できます。

包含要素で何をする必要があるかによって、これはうまくいくかもしれません:

<div>
    <div style="position: absolute;">Element content here</div>
    <img src="image.png" style="max-width: 300px; max-height: 300px;" />
</div>

Answer 2

あなたのページの構造は何ですか？

次のようなものを使用すると思います：

<div id="container">
    <img src="img.jpg" />
</div>

<style>
    #container {
        display: inline-block;
        border:1px solid blue;
        max-width:300px;
        max-height:300px;
    }
</style>