atualizei um pouco meu post. tente novamente. você vai ter que brincar com o tamanho da imagem para deixá-la como você quer. não tenho ideia de qual tamanho você quer e usar 300 para tudo funcionou bem para mim. o tamanho da imagem será uma questão de gosto.
Estou perto da solução… é culpa do Chrome…
Aparentemente no Safari fica perfeito - obrigado pela ajuda
agora a pergunta é: por que o Chrome faz isso?
1 curtida
Não estou tendo problemas no Windows Chrome ou no Safari do iOS. Usei ambos para fazer minhas capturas de tela e postagens. Tente o código atualizado que postei. Pode resolver.
mesmo problema…
qual problema? o problema de dimensionamento do Chrome?
Desculpe pela falta de clareza; o problema é que, quando uso meu navegador principal (Chrome), não consigo ver o logotipo no rodapé. Quando uso o Safari, consigo ver os logotipos no rodapé. Também tentei usar o Chrome no MacBook da minha namorada, e funcionou bem para ela; conseguimos ver os logotipos no rodapé. Portanto, pode haver algo estranho com meu Chrome; não tenho ideia do quê.
Também notei que no telefone o formato não está corretamente dimensionado - você sabe como corrigir isso?
você quer que as imagens encolham e expandam com o tamanho da tela? você também pode fazer um rodapé diferente para a visualização móvel ou apenas colocar o rodapé na visualização desktop. você notará que existem seções na tela de edição de HTML/CSS para desktop e mobile, com as mesmas abas da seção comum.
você provavelmente terá que experimentar com o html de dimensionamento de imagem. você provavelmente vai querer usar dimensionamento relativo em porcentagens, mas as imagens são de tamanhos diferentes, então será difícil, a menos que você tenha imagens de mesmo tamanho. eu não estou muito claro sobre o que você quer.
1 curtida
alguém aqui muito mais inteligente do que eu sugeriu que talvez você devesse verificar no modo anônimo do navegador para descartar quaisquer extensões que estivessem causando problemas lá.
sugiro que você redimensione as imagens para dimensões semelhantes com as quais você possa trabalhar e, em seguida, use as diferentes seções de visualização CSS e RODAPÉ para desktop e mobile para obter o que você procura.
1 curtida
Sim, desculpe por não ter sido claro, eu gostaria que os logotipos escalassem com o tamanho da janela, tanto para desktop quanto para mobile.
(usar o modo anônimo foi uma ideia brilhante 
)
Olá Michele,
Você poderia tentar o seguinte código?
HTML (Removi os atributos width das imagens e adicionei uma classe wrap ao contêiner):
<div class="wrap custom-footer-image">
<a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
<a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
<a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
<a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
CSS:
.custom-footer-image {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
a {
flex: 1;
text-align: center;
img {
max-width: 100%;
}
}
}
Como exibe no desktop:
No mobile:
O que você acha?
O layout mobile poderia ser alterado para duas colunas de duas imagens se elas ficarem muito pequenas em dispositivos móveis.
4 curtidas
Funciona perfeitamente, obrigado a todos pelo ótimo suporte!
2 curtidas
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.