Siempre puedes sobreescribir propiedades del css. Por ejemplo puedes crear una clase CustomModal
y hacer lo siguiente:
img{
width:200px;
height:400px;
background-color:blue;
}
.CustomModal .modal-dialog{
max-width: fit-content !important;
pointer-events: auto;
background-color:transparent;
}
.CustomModal .btn-close{
position: absolute;
top: -10px;
right: -13px;
border-radius: 50%;
background-color: white;
padding: 5px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MiModal">
Abrir
</button>
<div class="modal fade CustomModal" id="MiModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<img >
</div>
</div>
La ventana modal de bootstrap se compone de varias partes:
- modal-dialog
- modal-content
- modal-header
- modal-body
- modal-footer
Los cuales son div
que van dando formato de ventana, principalmente agregando margin
y padding
, como no nos interesa eso, solo vamos a ocupamos modal-dialog
, donde le cambiamos el width para que se ajuste a la imagen, le seteamos el pointer-event
en auto ya que bootstrap lo cambia (sin esto el botón cerrar no funciona)
Además dentro agregamos un botón para cerrar, y su respectivo css con position:absolute para sacarlo fuera de la imagen como tu quieres.