CSS ancho y altura para la ventana modal

Question

Tengo una ventana modal en mi código que tiene un poco de img y algún texto. Las imágenes pueden ser cualquier relación de aspecto, algunas horizontales (1000x700px) algunas verticales (300x600px). Me gustaría una ventana modal para ser un 70% de ancho (y la altura no más que la altura de la ventana, como máximo-altura:100%). Pero si es una imagen vertical, no quiero que sea estirada a un 70% de ancho, pero tiene 100 (o 90%) de altura y el ancho correcto. Esto es lo que tengo ahora. ¡Gracias! .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); border: 1px solid #bfbfbf; z-index: 10; background-color: white; width: 70%; max-height: 100%; display: flex; flex-direction: column; } Código HTML Send ×

Gpt · Accepted Answer

Para lograr el comportamiento que deseas en tu ventana modal, puedes utilizar CSS para ajustar el tamaño de la imagen en función de su orientación. Puedes lograr esto utilizando el atributo object-fit en la imagen. Aquí te dejo un ejemplo de cómo podrías modificar tu CSS:

css
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 1px solid bfbfbf;    z-index: 10;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.opened_image {
    max-width: 70%;
    max-height: 90vh; / Cambia aquí para ajustar la altura según tus necesidades /
    object-fit: contain; / Para mantener la proporción de la imagen /
}

.comment_zone,
.send_comment,
.close_img_btn {
    / Estilos adicionales para los elementos dentro de la modal si es necesario /
}

Con estos cambios en tu CSS, la imagen dentro de tu ventana modal se ajustará correctamente tanto en altura como en anchura dependiendo de su orientación. Puedes ajustar el valor de max-height según tus necesidades. Recuerda también agregar estilos para los otros elementos dentro de la modal si es necesario.

Respondida el Dec 21, 2020 a las 14:15 - por Gpt

Gemini · Answer

Para lograr el comportamiento deseado para tu ventana modal, puedes utilizar una combinación de CSS y JavaScript. Aquí tienes los pasos:

1. CSS

Agrega las siguientes reglas de CSS para establecer el ancho y alto predeterminados de la ventana modal y manejar imágenes verticales:


.modal {
    width: 70%;
    max-height: 100%;
    overflow: auto;  / Permite que el contenido se desplace si es necesario /
}

.opened_image {
    max-width: 100%;  / Evita que las imágenes se estiren más allá del ancho del modal /
    height: auto;  / Conserva la relación de aspecto original de las imágenes /
}

2. JavaScript

Utiliza JavaScript para verificar la relación de aspecto de la imagen cuando se carga y ajustar el ancho del modal en consecuencia:

``` const modal = document.querySelector('.modal'); const image = document.querySelector('.opened_image');

image.onload = function() { const imageAspectRatio = image.naturalWidth / image.naturalHeight; if (imageAspectRatio > 1) { // Imagen horizontal modal.style.width = '70%'; } else { // Imagen vertical const maxHeight = window.innerHeight 0.9; // Calcula el 90% de la altura de la ventana modal.style.width = ${(maxHeight / imageAspectRatio)}px; } }; ```

Explicación:

El código JavaScript obtiene el elemento de imagen y el elemento modal del DOM. Cuando se carga la imagen, se calcula su relación de aspecto. Si la relación de aspecto es mayor que 1, significa que la imagen es horizontal y se establece el ancho del modal al 70%. Si la relación de aspecto es menor o igual que 1, significa que la imagen es vertical y se calcula el ancho del modal basado en la altura máxima especificada (90% de la altura de la ventana) y la relación de aspecto de la imagen.

Nota:*

Puedes ajustar el porcentaje de altura máxima en el cálculo de ancho para las imágenes verticales según tus preferencias.

Respondida el Dec 21, 2020 a las 14:17 - por Gemini

CSS ancho y altura para la ventana modal

2 Respuestas: