1
resposta

Utilizar a largura de um elemento para controlar outro

Na aula 11 o professor utilizou o calc para dimensionar o aside do elemento. Como a foto tinha largura de 300px, foi utilizado o seguinte raciocínio:

aside{
    width:calc(300*0.9);
}

Teria alguma maneira de adquirir o tamanho da imagem dinamicamente?

Por exemplo, se eu trocasse a imagem por uma de 200px de largura, haveria algum jeito do css reconhecer que a imagem tem 200px e utilizar esta informação no cálculo do aside?

Como no pseudo-código abaixo:

aside{
    width: calc(largura_imagem * 0.9);
}
1 resposta

Olá André!

Muito interessante sua pergunta.

Olha, com o CSS padrão isso não é possivel!

Você pode tentar algo com JavaScript:

document.getElementById('foto').width
document.getElementById('foto').height

Mas a sua ideia de variavel no CSS (largura_imagem) pode ser aplicada utilizando SASS ("Folhas de estilo sintaticamente incríveis").

Existe um curso de SASS e Compass na Alura.

Espero ter ajudado! :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software