I am currently utilizing Bootstrap 4.2 to create a popup window (modal) featuring an image displayed at its real size (100%) in both width and height, provided that the browser window size permits. If the image surpasses the window dimensions, it should automatically resize accordingly. Despite implementing the following code snippet, the image ends up enlarged (+100%) in the width of the modal, despite setting max-width: 100%.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>100% Size Image</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<style>
.img-100{
max-width: 100%;
max-height: 100%;
}
</style>
<a href="#modalArticulo" role="button" class="btn btn-primary" data-toggle="modal">Launch modal</a>
<div id="modalArticulo" class="modal fade " tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<img src="../images/Imagen360x360.jpg" class="img-100">
<!-- <img src="../images/Imagen1200x1200.jpg" class="img-100"> -->
</div>
</div>
</div>
</body>
</html>
The images will be dynamically loaded, making it impossible to determine their default sizes upfront.