Cómo podría hacer si quiero colocar un gif, que en teoría se ve bien hasta 403 px, pero que después de eso, se distorsiona horrible. Resu...

Norma Yamileth Diaz Escobar

Pregunta

student•hace 4 años

Cómo podría hacer si quiero colocar un gif, que en teoría se ve bien hasta 403 px, pero que después de eso, se distorsiona horrible. Resulta que estaba haciendo un trabajo, y mi cabecera y footer se mantienen bien, pero mi main que tiene una sección con ese gif, se distorsiona súper, súper feo, a tal grado de cubrir incluso un párrafo de la cabecera?

rodrigo tejada

student•hace un año

ñdisplay: flex; align-items: flex-end; justify-content: center; min-height: 100vh; background-color: var(--dark-color); overflow: hidden; perspective: 1000px;

rodrigo tejada

student•hace un año

display: flex;

align-items: flex-end;

justify-content: center;

min-height: 100vh;

background-color: var(--dark-color);

overflow: hidden;

perspective: 1000px;

rodrigo tejada

student•hace un año

1 body {

display: flex;

align-items: flex-end;

justify-content: center;

min-height: 100vh;

background-color: var(--dark-color);

overflow: hidden;

perspective: 1000px;

Norma Yamileth Diaz Escobar

student•hace 4 años

Muchas gracias. Claro como el agua

Carlos Eduardo Gomez García

teacher•hace 4 años

Sip, en primera, es un poco más difícil de manipular y hacerla responsive si usas

background-image

porque básicamente al hacerlo de esta forma, la imagen no es un elemento que exista realmente dentro tu documento, sino que es un simple fondo, como si fuera un color más, pero es una imagen de fondo.

Al hacer con la etiqueta

<img>

es más fácil de manipular, ya que ahí sí que tu imagen es un elemento que forma parte del documento, digamos, ahí tu imagen sí es un bloque dentro de tu documento.

Ya nivel de SEO (posicionamiento para Google), una etiqueta

<img>

tiene más relevancia, ya que de nuevo, es un elemento que forma parte de tu documento, por lo que una página web rica en imágenes (sin excederse) es una página web que a Google le gusta para indexar. En cambio, si usas

background-image

pues Google no la tomará en cuenta porque pensará que es un simple fondo más.

En resumen, ¿cuándo usar una u otra? Es sencillo, si tu imagen es importante para la información que ofrece tu página (por ejemplo alguna imagen relacionada con lo que estás explicando, la foto de perfil de un usuario, etc.) lo mejor es que uses la etiqueta

<img>

en cambio, si la imagen no es importante para lo que tu página está explicando y solo la quieres usar como un fondo porque se ve bonito como queda y así, lo mejor es que uses

background-image

Norma Yamileth Diaz Escobar

student•hace 4 años

Hay una** diferencia** entre poner la imagen con la etiqueta img o ponerla como background image???

Carlos Eduardo Gomez García

teacher•hace 4 años

¿Y si pruebas a usar otro gif? 🤔

Y tienes que ponerlo en la imagen, ya que es la imagen a la que le quieres limitar el tamaño :D

Norma Yamileth Diaz Escobar

student•hace 4 años

Muchas gracias por tu respuesta. Intentaré hacerlo, aunque creo que la calidad del gif era súper mala, ya que lo vi desde otro celular que la pantalla no es tan tan buena que se diga, e incluso se miraba un poquito raro ahí. Al final opté por cambiarlo a una imagen png, que no se distorsionaba mucho. Y creo que yo me confundía en donde poner el max-width si en el contenedor padre o ya en la mera imagen.

Carlos Eduardo Gomez García

teacher•hace 4 años

¡Hola! Como sabrás los gifs usualmente son hechos en tamaño pequeñitos, por lo que verlos en resoluciones grandes no es viable. En ese caso, lo que yo te recomiendo (y lo que hacen muchas páginas) es limitar el tamaño de ese gift usando la propiedad

max-width

de CSS, por ejemplo, si tu sabes que se bien hasta los 403px entonces podrías limitar su tamaño hasta ahí (y si quieres que se vea estéticamente bien incluso podrías centrarlo), por ejemplo:

HTML

<div class="gif-container">
        <img src="mi_gif_super_cool.gif" alt="Un gif :D">
</div>

CSS

.gif-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gif-container img {
    display: inline-block;
    width: 100%;
    max-width: 403px;
}

De esta forma, el contenedor del gift medirá siempre ell 100% y mantendrá siempre centrado al gif, y el gif también siempre va a medir el 100% del ancho, pero nunca podrá medir más de 403px, es decir, cuando llegue a los 403px se quedará estático en ese tamaño y dejará de medir ese 100% que le pusimos, y gracias a que el contenedor usa flexbox, el gif se mantendrá centrado :D

Cómo podría hacer si quiero colocar un gif, que en teoría se ve bien hasta 403 px, pero que después de eso, se distorsiona horrible. Resu...

Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First