Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, bom dia!
As imagens do meu site ficam corretas, nas proporções definidas, quando testo localmente (inspecionado a página no navegador) , porém quando fiz um teste no servidor online e verifiquei em outros monitores "reais" as imagens ficam maiores que o tamanho máximo definido (e elas aumentam desproporcionalmente), em algumas resoluções.
Por exemplo: eu testei em monitores 17 e 19 polegadas (ambos com a resolução padrão 1024 X 768 px, tbm testei outras resoluções nessa telas) e as imagens ficaram "esticadas" horizontalmente e achatadas verticalmente, mas nessa mesma resolução, no computador onde fiz essas páginas (com resolução padrão de 1366 X768 px tela de 15"), as imagens ficam corretas (simulando uma tela na resolução de 1024X768px). Em telas menores que 15" esta tudo certo tbm.
Defini um tamanho máximo para as imagens, porém quando em telas maiores elas aumentam muito e desproporcionalmente (mesmo com resolução que já esta definida no css) :
img{
width:100%;
height:auto !important;
max-width:400px;
max-height:300px;
}@media screen and (max-width: 1024px){
.img_textos{
width:100%;
max-width:300px;
}
Teria alguma forma, de quando o site, chegar a resolução máxima definida (1366X768 px) as imagens e o site em geral não aumentar além do estabelecido para essa resolução (sendo esse o limite máximo)?
Obrigada!@BelleFisio
Não ficou claro o que você pretende fazer.
A página com o problema que você relata está online? Poste o link.
>
5 horas atrás, uninerds disse:
BelleFisio fizemos vídeos sobre Design Web Responsivo, se quiser depois dá uma olhada:
Tente fazer o seguinte, no HTML coloque a largura e altura máxima que você deseja para a imagem:
<img src="imagem.png" width="1024" height="auto" />
E no CSS defina que a largura máxima será 100%img {
max-width: 100%;
height: auto;
}
Nesse caso a largura máxima que a imagem terá é 1024px e se a tela for menor ela se ajustará a tela e se for maior não passará deste tamanho
Obrigada! Vou ver a vídeo aula, e fazer a adaptação recomendada no meu código. Quando concluir posto aqui. Agradeço a atenção>
Em 24/03/2018 at 11:48, uninerds disse:
BelleFisio fizemos vídeos sobre Design Web Responsivo, se quiser depois dá uma olhada:
Tente fazer o seguinte, no HTML coloque a largura e altura máxima que você deseja para a imagem:
<img src="imagem.png" width="1024" height="auto" />
E no CSS defina que a largura máxima será 100%img {
max-width: 100%;
height: auto;
}
Nesse caso a largura máxima que a imagem terá é 1024px e se a tela for menor ela se ajustará a tela e se for maior não passará deste tamanho
Obrigada, resolveu o problema!Por nada, ficamos felizes por ter ajudado
BelleFisio fizemos vídeos sobre Design Web Responsivo, se quiser depois dá uma olhada:
Tente fazer o seguinte, no HTML coloque a largura e altura máxima que você deseja para a imagem:
img {