ブートストラップ4モーダルスケール（内容付き）

Question

私はブートストラップ4モーダルを使用していますが、基本的に画像のみが含まれています。今はモーダルダイアログの最大幅を95％に設定しました。モーダルが開くときはいつでも、それは常に95％です。イメージが大きいときにはよく見えます。しかし、小さな画像がある場合、モーダルは95％の幅であり、小さな画像があり、実際にはよく見えません。

画像が大きければ幅は95％になるが、画像が小さければその画像の最大幅に調整されるように、モダルをスケールするにはどうすればよいですか？

CSSファイルには、このコードのほとんどは、単にモーダルは

.modal-dialog { 
 
    min-height: -webkit-calc(100vh - 60px); 
 
    min-height: -moz-calc(100vh - 60px); 
 
    min-height: calc(100vh - 60px); 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -moz-box-orient: vertical; 
 
    -moz-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -moz-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    overflow: auto; 
 
    max-width: 95%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="modal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <img [src]="picture" alt="large picture" class="img-fluid"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

は、私が使用するsugestなり、画面の中央に表示されるようにすることです

.modal-body { 
    margin:auto; 
    max-width:100%; 
} 

またはブートストラップクラスをボックスに追加する

<div class="modal-body mx-auto mw-100 "> 

リストはここで見つけることができます：https://getbootstrap.com/docs/4.0/utilities/sizing/ & https://getbootstrap.com/docs/4.0/utilities/spacing/

問題が解決しない場合は、私たちはあなたの問題は、ライブするのに十分なコードを使用してスニペットを知っていて、更新せてください;）

Answer 2

あなたは可能性がありバックグラウンドで隠しコンテナ内に画像をロードし、ロードされたらサイズを取得してモーダルの幅を再調整します。