画像の比率を崩さずにするには

Question

画像をスクリーンショットの大きさのまま表示して欲しいと言われた時、
(幅等指定していない、カメラでとったような画像)
比率を崩さずにするにはhtmlはどのように指定するのが正しいのか。たとえば下記のようなサイズの場合です。

そのまま貼り付けると上下に伸びてしまいます。

今指定しているもの

<div class="gazou1">
        <img class="gazou2" src="">
</div>



.gazou1{
    background-color: #f8f8ff;
    display:flex;
    justify-content: center;
 
    
}






.gazou1 img{
   
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
    margin-top:60px;



max-widthや背景画像として設定する方法も試しましたがうまくいきません。

Comments

[H40831]

画像を貼りたいだけなら display: flex; などの余計なCSSを消してください。
画像を貼りたいだけじゃないなら、ちゃんとやりたい事を書いてください

Answer 1

呈示のコードのままで上下に伸びるという現象は見られませんでした。(}の不足は補いましたが)
他の部分に問題があるのでは。

動作確認用サンプル

Answer 2

ご回答ありがとうございました。やりたい事を整理してから質問し直します。

Answer 3

ご回答ありがとうやりたい事を整理してから質問し直します。

Answer 4

横幅か縦幅のいずれかをCSSで指定するのが正解だと思います。
（やりたいことがようわからん）