0
145
VistasFirefox: Img con una altura del 100 % hace que la división principal tome el ancho de la imagen de origen
En primer lugar, quiero decir que he leído todas las preguntas similares antes de abrir esta. Ninguna de las soluciones sugeridas funcionó para mí.
Tengo un div modal, con tamaño relativo a la ventana gráfica. En su interior, tengo dos divs. El primer div contiene 2 íconos (solo se muestran al pasar el mouse) y una imagen, todos ellos envueltos individualmente en divs.
Mi propósito es cambiar el tamaño de la respuesta de img, por lo que no puedo establecer una altura específica.
En Chrome, todo funciona como se esperaba.
En Firefox, el envoltorio de la imagen (contorno amarillo) toma el ancho original de la imagen.
Aquí está el código
.modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .5); color: white; transition: transform .3s; z-index: 9; } .modal-content { background-color: #662824; color: #f3e5c0; border-radius: 8px; padding: 1rem; height: 60%; width: 60%; display: flex; flex-direction: row; justify-content: space-between; } .modal-carrousel { display: flex; flex-grow: 1; flex-direction: row; } .modal-details { display: flex; flex-direction: column; justify-content: space-between; gap: 15px; padding: 0 1rem; } .modal-img { height: 100%; width: auto; } @-moz-document url-prefix() { .modal-carrousel { outline: yellow 3px solid; } .modal-img { outline: green 5px solid; } } <div class="modal"> <div class="modal-content"> <div class="modal-carrousel"> <div class="modal-icon-change-container"> <img class="modal-icon-change" src='/assets/arrow_prev.svg' /> </div> <div class='modal-img-container'> <img class='modal-img' src="/assets/img1.jpg" /> </div> <div class="modal-icon-change-container"> <img class="modal-icon-change" src='/assets/arrow_next.svg' /> </div> </div> <div class="modal-details"> sample text </div> </div> </div>
·
Juan Pablo Isaza
Responde la pregunta