Cuando pasamos por entrevistas, a menudo nos hacen preguntas sobre el dise帽o. A menudo se reducen a enumerar los valores de la propiedad de visualizaci贸n o c贸mo centrar los elementos. Esto me molest贸 francamente, y quer铆a desarrollar mis propias tareas, con la ayuda de las cuales puedo probar las habilidades de dise帽o, y no c贸mo memoriz贸 los valores de las propiedades.
Descripci贸n de la tarea
A menudo, cuando leo art铆culos en Internet, me encuentro con el siguiente problema: el texto comienza a saltar cuando se carga la imagen.
Una soluci贸n a este problema es agregar un marcador de posici贸n para la imagen, en el cual la relaci贸n de ancho y alto repetir谩 la relaci贸n de aspecto de la imagen.
Comenzar茅 su implementaci贸n con marcado:
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
Para establecer dimensiones para un marcador de posici贸n, debe conocer la relaci贸n de aspecto de la imagen. Por ejemplo, usar茅 el tama帽o de imagen 1920x1080px.
Pero si muestra una imagen de este tama帽o, en la mayor铆a de las pantallas se mostrar谩 con desplazamiento horizontal. Por lo tanto, establecer茅 el elemento .post en un ancho m谩ximo de 640 px, y el ancho de la imagen se ajustar谩 a 茅l.
.post { max-width: 640px; } .post__img { max-width: 100%; }
Agregar茅 un marcador de posici贸n a la p谩gina usando el pseudo-elemento anterior. Tambi茅n debe recordar colocar la imagen encima.
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Ahora necesita el ancho del marcador de posici贸n para repetir el ancho de la imagen. Anteriormente, hice que la imagen ocupara el 100% del ancho del elemento padre .post. Har茅 lo mismo para el pseudo-elemento antes agregando display: block.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Amigos, en esto termin茅 mi parte del trabajo, y la suya permaneci贸. Necesita calcular la altura del pseudo-elemento anterior.
Para hacer esto, use la propiedad padding-top con un valor porcentual. Para hacer esto correctamente, debe conocer la peculiaridad de calcular el inter茅s en la propiedad padding-top. Y tambi茅n recuerde que los tama帽os de imagen son 1920x1080px.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Espero que intentes resolver este problema t煤 mismo. Pero si surgen dificultades, aqu铆 est谩 mi soluci贸n.
Soluci贸n
Las propiedades padding-top y padding-bottom tienen una caracter铆stica muy 煤til. Si establece los valores en porcentaje, se calcular谩n a partir del ancho del bloque principal.
En consecuencia, sabiendo esto y recordando el tama帽o de la imagen (1920x1080px), puede calcular la parte superior del relleno para el marcador de posici贸n utilizando la proporci贸n:
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
donde Chi y Vi son el ancho y la altura de la imagen.
Queda por agregar un valor para padding-top:
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }