Largo máximo e imagen de fondo 04/05

La verdad es que lo que ha pasado con este vídeo no me ha quedado del todo claro, e incluso me siento bastante confundido acerca de... Creo que le daré un segundo vistazo y procederé a darle la atención que merece.

Vaya, parece que ha sido mucho más fácil de lo que pensé. En el vídeo se nos explica como crear una pequeña grilla para algunos artículos ficticios con imágenes que hemos creado:

Los que callan los perritos

A principio habíamos agregado las imágenes de la forma tradicional, con la etiqueta <img src="algunaImagen"/> pero esto causa algunos problemas justo cuando queremos manipular las imágenes para que se vean de una forma más estética. Para ser más específicos esto causa problemas de estiramiento y para solucionar este tipo de problemas utilizamos un trucazo método que nos brinda el instructor y este es:

Colocar la imagen dentro de una etiqueta <div></div> justo de este modo:

<div style=background-img(algunaImagen.jpg)></div>

Creamos una clase en la cuál ponerle las propiedades indicadas para el manejo correcto de la imagen y en el CSS correspondiente añadimos las siguientes propiedades:

• background-size: cover → Indica que la imagen será la portada de la etiqueta div, lo que hará que automáticamente cubra todo el espacio disponible.
• background-position: center → Indica que la imagen estará centrada y desde ahí intentará abarcar todo el espacio en vez de iniciar desde una esquina y duplicarse para abarcar todo el espacio. 

Parece que a CSS no le gustan estas 2 instrucciones y sobreescribe estas propiedades más adelante por lo que se nos insta a utilizar la etiqueta que evita esto, es decir !important:

El tamaño si importa

Para tener un resultado final:

Elon nos dominará a todos

Código

— Share It —

• Facebook
• Twitter
• Google+
• Linkedin
• Pin It

About Juan José González

Hi, My Name is Hafeez. I am a webdesigner, blogspot developer and UI designer. I am a certified Themeforest top contributor and popular at JavaScript engineers. We have a team of professinal programmers, developers work together and make unique blogger templates.