## Ventanas Modales

De acuerdo a la siguiente cita:

> "... El problema es que no logro hacer que las imagenes se adapten al ancho del modal, por lo que el resto del contenido desaparece o no se muestra correctamente..."

Además, de este comentario:

> "El ejemplo que me pones con Bootstrap es lo que ando buscando, el detalle es que lo solicitan SIN Bootstrap..."

Como respuesta al compañero **Iván Hernández** se entiende que quieres lograr algo parecido a esto:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    /* 
    Tome en cuenta, que esta parte del código es la menos
    importante cuando se trata de ajustar imágenes a la
    ventana modal. El código JavaScript presente acá sólo es
    útil para abrir o cerrar una ventana modal. Sin embargo,
    se puede conseguir el mismo efecto sin JavaScript.
    */

    // La siguiente función permitirá pasar una cantidad
    // variable de parámetros. Los dos primeros parámetros
    // son los elementos que vamos a removerle y agregarle
    // clases CSS:
    const cerrar = (_modal, _card, ...elementos) => {
      if (
        elementos.length &&
        typeof _modal !== "undefined" &&
        typeof _card !== "undefined"
      ) {
        elementos.forEach((elemento) => {
          // Cuando se requiere que una cantidad variable
          // de elementos realicen las mismas acciones mediante
          // la captura del evento "click":
          elemento.addEventListener(
            "click",
            () => {
              // Al presionar los botones relacionados
              // el cierre de la ventana modal se removerán
              // las clases relacionadas con su visualización,
              // a la vez que se asignará la clase .none para 
              // ocultarlo al usuario:
              _modal.classList.remove("modal");
              _card.classList.remove( "card--main" );
              _modal.classList.add("none");
            },
            false
          );
        });
      }
    };

    // La función «cerrar()» permite pasar una cantidad 
    // variable de parámetros. El primero y segundo parámetro
    // son los elementos a procesar:
    cerrar(modal, card, botonCerrar, aceptar);

    // Agregar clases a los elementos «modal» «card»
    // para que se comporten como ventanas modales:
    const agregarClase = () => {
      modal.classList.remove("none");
      modal.classList.add("modal");
      card.classList.add("card--main");
    };

    // Cuando el usuario presiona el botón gris con la
    // etiqueta «Abrir Ventana Modal» se llama la función
    // «agregarClase()» que es la que agregarán las clases
    // modal y card--main en los elementos #modal y #card
    // para que se comporte como una venta modal:
    abrirModal.onclick = () => {
      agregarClase();
    };

<!-- language: lang-css -->

    /* Fuentes de Google */
    @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
    ::-moz-focus-inner {
      border: 0;
    }

    /* Fuente por defecto en toda la aplicación*/
    :root {
      font-family: "Roboto", sans-serif;
    }

    *{

      box-sizing: border-box;
    }
    *::before, *::after {
      box-sizing: inherit;
    }

    hr {
      margin: 10px auto;
      width: 100%;
      height: 0;
      border: 0;
      border-bottom: 1px solid;
    }

    /* Contenedor de la ventana Modal */
    .modal {
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      overflow: auto;
    }

    /* Ventana Modal con apariencia de una tarjeta */
    .card {
      --relleno: 10px;
      --anchura: 800px;
      border-radius: 5px;
      background-color: #e6e6e6;
    }
    .card--main {
      margin: 10px auto;
      width: calc(100% - 20px);
      max-width: var(--anchura);
      animation: 300ms ease fadeIn 1;
    }
    .card__header, .card__footer {
      min-height: 30px;
      padding: var(--relleno);
      overflow: hidden;
    }
    .card__header {
      min-height: 50px;
    }
    .card__header--flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Se ajusta la imagen a la anchura de su contenedor
       sin perder sus proporciones: */
    .card__img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 100%;

      /* La imagen pierde todo su color pasando a escala
         de grises */
      filter: saturate(0%);
    }

    /* Al colocar el cursor sobre la imagen recupera su color */
    .card__img:hover {
      filter: saturate(100%);
    }
    .card__title {
      font-size: 1.3rem;
      font-weight: normal;
    }
    .card__close {
      font-size: 1.5rem;
      width: 40px;
      width: 40px;
      text-align: center;
      transition: 300ms ease;
      border-radius: 3px;
      cursor: default;
    }
    .card__close:hover {
      background-color: #e00000;
      color: white;
    }
    .card__close:active {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
      transition: none;
    }

    .group-buttons {
      padding-top: var(--padding);
      padding-bottom: var(--padding);
      text-align: right;
      width: 100%;
    }

    .button {
      border: 0;
      height: 35px;
      min-width: 100px;
      border-radius: 3px;
      padding: 0 10px;
      background-color: #4d4d4d;
      color: white;
      font-family: inherit;
      font-size: inherit;
      transition: 300ms ease;
      outline: none;
    }
    .button:hover {
      background-color: #595959;
    }
    .button:active {
      transition: none;
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
    }
    .button--close {
      background-color: #e00000;
    }
    .button--close:hover {
      background-color: #c70000;
    }
    .button--ok {
      background-color: #0080d4;
    }
    .button--ok:hover {
      background-color: #0071bb;
    }

    .none {
      display: none;
    }

    @keyframes fadeIn {
      from {
        transform: scale(0.97);
      }
    }

<!-- language: lang-html -->

    <button class="button block" id="abrirModal">Abrir ventana modal</button>

    <!-- Ventana Modal -->
    <div id="modal" class="none">
      <div class="card" id="card">
        <header class="card__header card__header--flex">
          <div class="card__title">Título de la Tarjeta</div>
          <div class="card__close" id="botonCerrar">&times;</div>
        </header>

        <div class="card__content">
          <img src="https://cdn.pixabay.com/photo/2020/06/06/19/31/cat-5267886_960_720.jpg" class="card__img">
        </div>

        <footer class="card__footer">
          <p>Texto que se encuentra en el pie de la foto.</p>
          <hr>

          <div class="group-buttons">
            <button class="button button--ok button--right" id="aceptar">Aceptar</button>
          </div>
        </footer>
      </div>
    </div>

<!-- end snippet -->

### Estructura HTML

Lo puedes hacer manteniendo la siguiente estructura HTML:

``` none
.modal
  .card
  | .card__header
  | | .card__title
  | | .card__close
  | | |
  | .card__content
  | | .card__img
  | | |
  | .card__footer
  | | [texto]
  | | .group-buttons
  | | | .button
```

Aplicando las siguientes reglas:

+ **`.modal {}`:** es el contenedor de la ventana modal.
´
+ **`.card {}`:** es la ventana modal, pero con la apariencia de una tarjeta.

+ **`.card__header {}`:** es la cabecera de la ventana modal.

+ **`.card__title {}`:** es el título que se ubica dentro de `.card__header`.

+ **`.card__close {}`:** es el botón de cierre de la ventana modal.

+ **`.card__content {}`:** Donde se ubica el contenido de la ventana modal. En este caso, el contenido es la imagen que debe ocupar todo el de su contenedor (`.card__content`).

+ **`.card__footer {}`:** es el pie de la ventana modal. En ella se puede colocar un texto descriptivo. También se pueden colocar en ella uno o varios botones para realizar determinadas acciones.

+ **`.group_butttons {}`:** es la que afecta al elemento que contendrá a uno o varios botones en la parte inferior derecha de la ventana modal.

+ **`.button {}`:** es el que define la apariencia por defecto del botón.

> **IMPORTANTE:**
>
> Lea los comentarios que se encuentra ubicado en el código; publicado al principio de esta respuesta. En ella se explican detalles. También puede visitar [Ventana Modal - CodePen](https://codepen.io/dlunamontilla/pen/OJMMpOK?editors=0100) para que pueda experimentar con el código.