Я использую Bootstrap 4.2, чтобы показывать возникающее (модальное) окно с изображением в реальном размере (100 %) как в ширине, так и в высоте, пока это позволил размер окна браузера, и в противоположном случае, а именно, если изображение больше, чем размер окна, тогда он сократится автоматически. Я попытался со следующим кодом, но расширяется изображение (+100 %) в ширине модального, хотя это будет конфигурировать с 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>Imagen 100%</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>
Изображения будут загружены dinámicamente, так что я не могу знать размер изображений по умолчанию.
DespuГ©s тестирования с новостью versiГіn 4.3, и много, слишком много доказательств и потерянное время, я принял решение создать я собственный модальный, что в continuaciГіn я имею, из-за которого безопасный, у которого mГЎs одного будет эта проблема. Я считаю большой недостаток со стороны bootstrap, что не позволил конфигурировать правильно их tamaГ±os их imГЎgenes для больших экранов, настольных компьютеров todavГ - в existen, и tv с conexiГіn в Интернет tambiГ©n. Возможно неудача, что corregirГЎn в будущем.
<body>
<style>
.modal-image{
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content-img{
margin: auto;
display: block;
max-width: 100%;
max-height: 95%;
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom{
from{transform:scale(0)}
to{transform:scale(1)}
}
.modal-nav{
display: flex;
justify-content: center;
}
</style>
<h1>Custom Modal Image</h1>
<button id="showModal" class="btn btn-info">Modal</button>
<div id="modalImage" class="modal-image">
<div class="modal-content-img">
<img src="../images/Imagen1920x1200.jpg" class="modal-content-img">
<div class="modal-nav">
<button id="close" class="btn btn-info btn-sm">Cerrar</button>
</div>
</div>
</div>
<script>
window.onload = function(){
var show = document.getElementById('showModal');
show.addEventListener('click', showModal);
function showModal(){
var modal = document.getElementById('modalImage');
var close = document.getElementById('close');
var img = document.getElementById('img');
modal.style.display = "flex";
modal.style.flexDirection = "column";
modal.style.justifyContent = "center";
modal.style.alignItems = "center";
modal.style.alignContent = "center";
close.addEventListener('click', hideModal);
modal.addEventListener('click', hideModal);
document.addEventListener('keydown', hideModal);
function hideModal(e){
e.stopPropagation();
<!-- Si el evento fue lanzado por el modal (this) -->
if(e.target == this || e.key == 'Escape'){
modal.style.display = "none";
close.removeEventListener('click', hideModal);
modal.removeEventListener('click', hideModal);
document.removeEventListener('keydown', hideModal);
}
}
}
}
</script>
</body>
CaracterГ-sticas: Как только был открыт модальный, возможно закрывать кликая вне изображения, в botГіn Закрывать , или с клавишей Убегите . Изображение когда бы то ни было sobrepasarГЎ Ваш tamaГ±o реальный (100 %), но aprovecharГЎ вся ширина окна, чтобы являться (большими экранами). Responsive для mГіviles.