- contain
Escala la imagen al mayor tamaño posible sin recortarla ni estirarla. - cover
Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.
-
check_circle_outlineMódulo 1 | 4 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 4 clases
Selectores
expand_more -
check_circle_outlineMódulo 3 | 5 clases
Background
expand_more -
check_circle_outlineMódulo 4 | 4 clases
Colores
expand_more -
check_circle_outlineMódulo 5 | 3 clases
Bordes
expand_more -
check_circle_outlineMódulo 6 | 5 clases
Fuentes
expand_more -
check_circle_outlineMódulo 7 | 4 clases
Posiciones
expand_more -
check_circle_outlineMódulo 8 | 3 clases
Margin & Padding
expand_more -
check_circle_outlineMódulo 9 | 6 clases
Imágenes
expand_more -
check_circle_outlineMódulo 10 | 4 clases
Animaciones
expand_more -
check_circle_outlineMódulo 11 | 7 clases
Extras
expand_more -
check_circle_outlineMódulo 12 | 7 clases
Ejercicios
expand_more -
check_circle_outlineMódulo 13 | 9 clases
Flexbox
expand_more -
check_circle_outlineMódulo 14 | 11 clases
CSS Grid
expand_more
5 comentario(s)
De las anteriores lecciones de este curso, esta ha sido la más llamativa y completa, bien explicada y aportante. Hago claridad que no quiere decir que las anteriores no lo sean.
Diferencia entre los background-size cuando ya estas usando background-position: 50% 50%; para centrar la imagen en el punto mas exacto del centro del navegador y background-attachment: fixed; para mantener fija la imagen aún y cuando hagas scroll.
background-size: cover;
background-size: contain;
background-size: 100%;
background-size: 100% 100%;
1- background-size: cover;
Si lo usas con la ventana de navegador completa se verá bien la imagen, pero una vez empieces a hacer mas chico el navegador, verás que la imagen mantiene el mismo tamaño como cuando la ventana estaba completa, no se amolda al responsive.
2-background-size: contain;
Cuando la ventana del navegador esta al 100%, la imagen tendra el tamaño del 100% de lo primero que toque la orilla del navegador, es decir, si tu imagen es de 400ancho x 600altura, tu imagen tocara primero el techo y el piso del navegador, pero a lo ancho no lo tocara. En el caso del responsive, se irá adaptando, conforme hagas mas chico el navegador, pero siempre tomando como referencia el centro, pero no abarcará el 100% de todo el navegador.
3-background-size: 100%;
Toma el 100% del navegador en Desktop, pero en el responsive sucede lo mismo que con contain.
4-background-size: 100% 100%;
Se adapta la imagen al 100% del Desktop y el responsive esta es la chingona, en mi humilde opinión.
Espero les sirva mi opinión, hice muchas pruebas para poder redactar esto xD
background-size: cover;
background-size: contain;
background-size: 100%;
background-size: 100% 100%;
1- background-size: cover;
Si lo usas con la ventana de navegador completa se verá bien la imagen, pero una vez empieces a hacer mas chico el navegador, verás que la imagen mantiene el mismo tamaño como cuando la ventana estaba completa, no se amolda al responsive.
2-background-size: contain;
Cuando la ventana del navegador esta al 100%, la imagen tendra el tamaño del 100% de lo primero que toque la orilla del navegador, es decir, si tu imagen es de 400ancho x 600altura, tu imagen tocara primero el techo y el piso del navegador, pero a lo ancho no lo tocara. En el caso del responsive, se irá adaptando, conforme hagas mas chico el navegador, pero siempre tomando como referencia el centro, pero no abarcará el 100% de todo el navegador.
3-background-size: 100%;
Toma el 100% del navegador en Desktop, pero en el responsive sucede lo mismo que con contain.
4-background-size: 100% 100%;
Se adapta la imagen al 100% del Desktop y el responsive esta es la chingona, en mi humilde opinión.
Espero les sirva mi opinión, hice muchas pruebas para poder redactar esto xD
Background-position: center; te lo pone en el centro, también puedes usar porcentajes como Background-position:50% 50%; , se recomienda usar Background-position:50% 50%; porque así puedes colocar mejor la imagen.
Background-attachment: fixed; te pone la imagen fija, aunque hagas scroll, la imagen se quedara en donde le digas.
Background-size: 50% 50%; te pone la imagen del tamaño que le digas en X o Y.
Nota: si la imagen es mas ancha que alta o viceversa, y tu solo pones “background-size: 100%;” la imagen en cuanto toque el 100% ya sea del ancho o del alto, así se quedará, si quieres que tenga el 100% del sitio, usa background-size: 100% 100%;
background-size: contain; tiene el mismo efecto que “background-size: 100%;” si la imagen es mas ancha que alta o viceversa, la imagen en cuanto toque el 100% ya sea del ancho o del alto, así se quedará.