← Desenvolvimento

AJUDA como fazer para que as imagens não ficarem "esticadas"

Lida 3041 vezes

Offline

cadj 
Membro
Mensagens 29 Gostos 0
Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 10 Posts First Post Signature

Boa noite,

Amigos estou com um problema no meu site que diz respeito ao tamanho das imagens e gostaria de ouvir sugestões para uma solução.

http://www.academiadefutebol.pt/index.php/noticias/detalhe/2116

Esta publicação é o melhor exemplo, a imagem de origem não é larga mas como o espaço para onde ela vai esta programado para "aplicar" as imagens acontece isto. Tanto antes de abrir a noticia como depois de abrir a mesma.


O que devo dizer ao programador para que ele saiba de imediato como resolver?

Obrigado!

Offline

fhanity 
Membro
Mensagens 191 Gostos 5
Feedback +1

Troféus totais: 18
Trófeus: (Ver todos)
Apple User Apple User Super Combination Combination Topic Starter Level 3 Level 2 Level 1 100 Posts 50 Posts

o "programador" devia saber resolver isso, no entanto a imagem está com a largura para 750px , logo vai ficar com 750px independemente do tamanho original. o mesmo se aplica a altura. se tirar as 2 propriedades a imagem fica com o tamanho original.
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Se notares, mesmo a imagem original está esticada:
http://www.academiadefutebol.pt/admin/imgs/noticias_imgs/miguel_lourenco.jpg

Portanto, logo à partida, parece-me que há um redimensionamento da imagem mal calculado.

Para além disso, as dimensões da imagem são de 750 x 500 pixels, mas o atributo height da imagem está com 417 pixels.

Código: (html4strict) [Seleccione]
<div id="img_newsnoticias" class="img_newsnoticias">
<img id="imagem_img_news" src="http://www.academiadefutebol.pt/admin/imgs/noticias_imgs/miguel_lourenco.jpg" width="750" height="417" alt="noticias"/>
</div>

Esta ID no css, também está a limitar a altura a 417px do espaço onde se encontra a imagem, tens de retirar os 417px de altura, ou manter e ajustar o width da imagem em escala com o height.

Código: (css) [Seleccione]
#img_newsnoticias {
height: 417px;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: absolute;
vertical-align: middle;
width: 752px;
}

Offline

BrunoTeixeira 
Membro
Mensagens 93 Gostos 2
Feedback +2

Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 50 Posts 10 Posts First Post

Já agora podes dizer ao programador para nesse css mudar esses margin todos para:

Código: [Seleccione]
margin: 10px auto auto;
muito mais limpo
Offline

kurtmix 
Membro
Mensagens 1895 Gostos 605
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Tenth year Anniversary Nineth year Anniversary Eighth year Anniversary Seventh year Anniversary Search Level 5 Windows User Super Combination Combination Topic Starter

Engraçado que eu olho para o site por alto e parece relacionado com gás, há banners de uma empresa de gases por todo lado.
Considero importante a publicidade, mas sem exageros
Offline

cadj 
Membro
Mensagens 29 Gostos 0
Troféus totais: 17
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 10 Posts First Post Signature

Se notares, mesmo a imagem original está esticada:
http://www.academiadefutebol.pt/admin/imgs/noticias_imgs/miguel_lourenco.jpg

Portanto, logo à partida, parece-me que há um redimensionamento da imagem mal calculado.

Para além disso, as dimensões da imagem são de 750 x 500 pixels, mas o atributo height da imagem está com 417 pixels.

Código: (html4strict) [Seleccione]
<div id="img_newsnoticias" class="img_newsnoticias">
<img id="imagem_img_news" src="http://www.academiadefutebol.pt/admin/imgs/noticias_imgs/miguel_lourenco.jpg" width="750" height="417" alt="noticias"/>
</div>

Esta ID no css, também está a limitar a altura a 417px do espaço onde se encontra a imagem, tens de retirar os 417px de altura, ou manter e ajustar o width da imagem em escala com o height.

Código: (css) [Seleccione]
#img_newsnoticias {
height: 417px;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: absolute;
vertical-align: middle;
width: 752px;
}



Boas,
Como dizes a imagem vai ficar com o tamanho original?
Pretendo que não fique esticada conforme vistes e se for maior que o espaço destinado a imagem, que não saia dos limites. ex de uma que esta bem:
http://www.academiadefutebol.pt/index.php/treinadores_debates/debate/4/51

Obrigado a todos que estão a opinar!
Offline

=IceBurn= 
Membro
Mensagens 897 Gostos 3
Feedback +3

Troféus totais: 32
Trófeus: (Ver todos)
Windows User Level 6 Linux User Mobile User Super Combination Combination Topic Starter Poll Voter Poll Starter Level 5

Estou apenas a indicar a origem do problema cadj.

A resolução do problema passa por consultar e alterar código PHP, já que deduzo que essas medidas nos atributos da imagem sejam inseridas de forma dinâmica.

À parte disso, se aquela foto quando foi carregada não estava já esticada (e não estou a falar de atributos html ou css), então há claramente um cálculo deficiente no redimensionamento da imagem que ocorre em situações específicas, como por exemplo quando uma imagem excede uma dimensão estipulada, já que imagens pequenas ficam em esquadria.