Bootstrap 4 Modalskala mit Inhalt

Question

Ich benutze Bootstrap 4 Modal, das modale enthält im Grunde nur ein Bild. Jetzt setze ich meinen modalen Dialog max-width auf 95%. Immer wenn das Modal geöffnet wird, sind es immer 95%, was gut aussieht, wenn das Bild groß ist. Aber wenn es ein winziges Bild gibt, ist das Modal immer noch 95% breit und da ist das winzige Bild, das nicht wirklich gut aussieht.

Wie skaliere ich das Modal, so dass, wenn das Bild groß ist, die Breite 95% ist, aber wenn das Bild klein ist, passt es sich an die maximale Breite dieses Bildes an?

die CSS-Datei, die meisten dieser Code nur das modale in der Mitte des Bildschirms

.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

I

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

verwenden würde sugest erscheinen lassen oder fügen Sie der Box die Bootstrap-Klasse

hinzu

Listing hier gefunden werden kann: https://getbootstrap.com/docs/4.0/utilities/sizing/ & https://getbootstrap.com/docs/4.0/utilities/spacing/

Wenn das nicht, bitte nicht funktioniert, lassen Sie uns Ihre Schnipsel mit genug Code kennen und aktualisieren Sie Ihre Frage zu zeigen, leben;)

Answer 2

Sie könnten Lade das Bild im Hintergrund, in einem versteckten Container und wenn es geladen ist, nimm die Größe und stelle die Breite des Modals entsprechend ein.