Question

0

132

Vistas

Imagen Html-Css estirada

Estoy construyendo un juego de tarjetas de memoria con HTMl, CSS y JS para practicar. Esto es lo que he hecho hasta ahora: https://spomin.krix12.repl.co/ Como puede ver, la imagen del signo de interrogación y la imagen de la tarjeta invertida se estiran un poco. Este es el código CSS para ello:

 .memory-game { width: 640px; height: 640px; margin: auto; display: flex; flex-wrap: wrap; perspective: 1000px; } .memory-card { width: calc(25% - 10px); height: calc(33.333% - 10px); margin: 1px; position: relative; transform: scale(1); transform-style: preserve-3d; transition: transform .5s; box-shadow: 1px 1px 1px rgba(0,0,0,.3); }

memory-card está dentro memory-game . ¿Cómo puedo arreglar las imágenes estiradas? ¿Hay algún problema en html (puedo proporcionarle el código si es necesario) o css o debería recortar las imágenes en alguna proporción? Apreciaría tu ayuda.

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Puede evitar que las imágenes se estiren especificando solo un ancho o alto específico (pero no ambos).

Es posible que desee envolver las imágenes en un div que tenga el tamaño del padre y centre la imagen dentro de él (por ejemplo, usando un cuadro flexible con justify-content: center; y align-items: center; )

about 4 years ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-09T09:08:55.284Z

1. Primera solución 🤧😖:

La primera columna usa la etiqueta div en el cambio de img , lo que podría ser una solución no factible en cuanto a accesibilidad. Así es como lo he hecho:

 <div class="back-face" style=" height: 100%; background-image: url('slike/emoji-ji/zaprto.png'); background-size: contain; background-repeat: no-repeat; background-position: center; "></div>

2. Segunda solución 😁😎:

¡Usando flexión! (como Hades menciona a continuación ) Coloque el img dentro de un div , luego haga que ese div sea una display: flex; , y convierta su contenido en align-items: center; . La imagen, a su vez, necesita algunas propiedades para saber cómo renderizar el width y el height , que puedes ajustar a tus necesidades.

 <div class="back-face" style="display: flex;align-items: center;"> <img src="slike/emoji-ji/zaprto.png" alt="zaprto" style=" width: 100%; height: 50%; // or auto "> </div>

3. Tercera y mejor solución 😍😍🥰:

¡Usemos lo que aprendimos hasta ahora y cambiemos mucho código! Si quieres que todos se vean como el tercero, estos son los pasos:

Cambiar el CSS:

 .memory-card { width: calc(25% - 10px); height: auto; margin: 1px; position: relative; transform: scale(1); transform-style: preserve-3d; transition: transform .5s; box-shadow: 1px 1px 1px rgb(0 0 0 / 30%); /* add the following lines which used to be in img */ border-radius: 5px; background: #1C7CCC; display: flex; align-items: center; } .front-face, .back-face { /* a few things removed */ width: 100%; position: absolute; backface-visibility: hidden; } .front-face { transform: rotateY(180deg); /* add the following line to keep consistency */ padding: 20px; }

Y el html resultante se verá así:

 <div class="memory-card" data-framework="gospod" style="order: 4;"> <img class="front-face" src="slike/emoji-ji/gospod.png" alt="vesel"> <img class="back-face" src="slike/emoji-ji/zaprto.png" alt="zaprto"> </div>

¡Apenas cambios menores!

Pensamientos finales

¡Recuerde, usar el estilo en línea dentro de su html es un antipatrón! Asegúrese de refactorizar el código proporcionado en sus propias clases CSS.

0

132