スクロールバーなしで1ページだけの幅に画像を設定するHTML - html、css、image、size

次のページがあります。

                <div class="Container100"
style="text-align: center; margin-top: 15px;">
<img
style="width: auto; max-width: 100%; height: auto; text-align: center;"
</img>
</div>

<div class="Container100">
<div class="Card ShadowEffect"
style="text-align: center;">
<div class="ContainerIndent">
Text
</div>
</div>
</div>

問題は今です： フッターと画像が1ページになり、スクロールする必要がない幅に画像のサイズを変更したいと思います。 現在、imgは大きすぎて、フッターも取得するには下にスクロールする必要があります。 レスポンシブな特定の幅に画像のサイズを変更するにはどうすればよいですか？ 500pxのような幅を定義できますが、幅/高さがスクロールせずに画像とフッターが1ページに表示されるほど大きくなければならないため、これは私が望むものではありません。 これどうやってするの？

回答：

画像幅を100％にする ページの高さと幅とともに。 また、フロートを自動に設定します

画像とフッターの両方に幅と高さを％で割り当てます。

例えば： 画像の幅が画面の95％の場合、幅を95％に設定します。 次に、フッターを幅に設定します：5％;

それはそれであるはずです:)