Quando passamos por entrevistas, muitas vezes nos fazem perguntas sobre layout. Freqüentemente, eles listam os valores da propriedade de exibição ou como centralizar os elementos. Isso me incomodou francamente e eu queria criar minhas próprias tarefas, com a ajuda da qual posso testar as habilidades de layout, e não como ele memorizou os valores das propriedades.
Descrição da tarefa
Frequentemente, quando leio artigos na Internet, encontro o seguinte problema: o texto começa a pular quando a imagem é carregada.
Uma solução para esse problema é adicionar um espaço reservado para a imagem, no qual a proporção de largura e altura repetirá a proporção da imagem.
Iniciarei sua implementação com marcação:
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
Para definir dimensões para um espaço reservado, você precisa conhecer a proporção da imagem. Por exemplo, usarei o tamanho da imagem 1920x1080px.
Mas se você exibir uma imagem desse tamanho, na maioria das telas, ela será exibida com rolagem horizontal. Portanto, definirei o elemento .post com uma largura máxima de 640px e a largura da imagem será ajustada a ele.
.post { max-width: 640px; } .post__img { max-width: 100%; }
Adicionarei um espaço reservado à página usando o pseudoelemento anterior. Você também precisa se lembrar de colocar a imagem em cima dela.
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Agora você precisa da largura do espaço reservado para repetir a largura da imagem. Anteriormente, fiz a imagem ocupar 100% da largura do elemento .post pai. Farei o mesmo com o pseudo-elemento antes adicionando display: block a ele.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Amigos, terminei minha parte do trabalho e a sua permaneceu. Você precisa calcular a altura do pseudoelemento anterior.
Para fazer isso, use a propriedade padding-top com um valor percentual. Para fazer isso corretamente, você precisa conhecer a peculiaridade de calcular o interesse na propriedade padding-top. E lembre-se também de que os tamanhos das imagens são 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 você tente resolver esse problema sozinho. Mas se surgirem dificuldades, existe a minha solução abaixo.
Solução
As propriedades padding top e padding bottom têm um recurso muito útil. Se você definir os valores em porcentagem, eles serão calculados a partir da largura do bloco pai.
Conseqüentemente, sabendo disso e lembrando o tamanho da imagem (1920x1080px), você pode calcular a parte superior do preenchimento do espaço reservado usando a proporção:
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
onde Shi e Vi são a largura e a altura da imagem.
Resta acrescentar um valor para o 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; }