Tamanhos de img no css

[erickcouto 6]

Pessoal gostaria de saber se existe algum comando no css ou html que por exemplo:

 

 

Eu posto algo no blog, adiciono uma imagem nesse post vamos supor que ela tem "600x350" ai na index tenho um espaço de "800xINFINITO" ai blz a imagem aparece com o tamanho real dela, ai no outro post eu coloco uma imagem de 900x1000 ai vem a magica, gostaria que a imagem fosse redimensionada automaticamente ....

 

 

Não se ficou claro, mas qualquer coisa tento explicar melhor...

 

 

 

vlwwww

 

 

 

[Marlon Pacheco 132]

No CSS coloque:

img {
  max-width: 100%;
}

[erickcouto 6]

Então, não funcionou ...

 

Mas mexendo no html/php percebi que tem umas medidas definidas como width: 290 e height: 160 , tem como mudar isso ??? Talvez esse seja o problema do width: 100% não funcionar.

[Marlon Pacheco 132]

Ah, sim. É bem provável.

Tem como postar parte do código?

[erickcouto 6]

<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
							<?php else: ?>
							<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=290&h=160" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
							<?php endif; ?>

será que ta certo ?

<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div>
							<?php else: ?>
							<div class="block-image"><a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=290&h=160" alt="<?php the_title(); ?>" width='290' height='160' /></a><?php echo $icon; ?></div> 

Olha eu achei isso no index.php mas to em duvida se é referente a imagem que to falando o tamanho 290x160 até condiz so que no css ele chama por .block img e não .block-image olha os codigos...

[Marlon Pacheco 132]

É justamente por estarem definidas as dimensões das imagens no HTML que o atributo do CSS não está funcionando.

Remove esses atributos do HTML que vai rolar.

[erickcouto 6]

Mas removo so as medidas deixando '' vazio ...

 

ou removo esse codigo todo q postei ?

[Marlon Pacheco 132]

Remove o trecho:

 width='290' height='160'

[erickcouto 6]

humm n funcionou ...

 

 

to fuçando aqui ...

[Marlon Pacheco 132]

Inspeciona o elemento pelo Chrome e vê se não está aplicando alguma regra de CSS que esteja definindo o tamanho.

[erickcouto 6]

dei uma olhada mas n manjo mto dessa ferramenta, mas la o max-width: 100% fica com um risco no meio .. o que seria isso ???

 

po vlw a força ai man

[Marlon Pacheco 132]

Bom, tem alguma regra de CSS anulando o max-width.

Coloca on-line pra galera poder colaborar.

[erickcouto 6]

Dei uma olhada em um blog que esta do jeito que quero deixar e notei uma diferença

 

a imagem dele esta como

<img class="alignnone size-full wp-image-33841" src="http://www.site.blog.br/wp-content/uploads/2014/07/cantada1.jpg" alt="cantada" width="610" height="915">

e no meu esta

<img src="http://localhost/wordpress/wp-content/uploads/2014/06/mapa-do-brasil-6-290x160.jpg" alt="xxxxxxx.">

será que tem algo a ve ???

 

 

Bom não sei se estou certo e se é assim que fala, mas pelo que eu entendi eu preciso fazer imprimir o caminho dessa imagem de um jeito que saia com width e height do tamanho original, pq aqui no chrome quando eu adiciono somente um height qualquer conforme o primeiro exemplo ai o max-width 100% funciona ....

[Claudio Junior 18 3]

O que acontece é que a imagem dele está com o tamanho definido no HTML e no seu não está!

 

De qualquer forma defina no CSS assim:

img {
max-width: 100%;
height: 800px;
}

Isso deve funcionar!! :yes:

[Marlon Pacheco 132]

Ah, tu tá usando o TimThumb... Nunca usei esse. Dá uma olhada nas configurações desse plugin. O melhor era incluir a imagem no tamanho original.

[erickcouto 6]

O que acontece é que a imagem dele está com o tamanho definido no HTML e no seu não está!

 

De qualquer forma defina no CSS assim:

img {
max-width: 100%;
height: 800px;
}

Isso deve funcionar!! :yes:

 

 

Esta definido sim, mas não com o tamanho original do post e sim como um tamanho reduzido para aparece no destaque da pagina index .. eu gostaria que no index essa pequena imagem de destaque do post, ficasse do tamanho original e que o posto pudesse ser visto no ja no index sem precisar entrar pra ver ele todo a não ser que eu adicionasse um LEIA MAIS.

 

 

MARLON

 

Não entendi o que disse sobre o TimThumb.

 

 

 

VLw pessoal

[Rafael Sirotheau 43]

Bom, tenho impressão que essa tua dúvida é de WordPress, muito mais que de CSS.

O que acontece, é que o WordPress esta requisitando do servidor a imagem no tamanho reduzido. Vais precisar verificar o PHP pra encontrar onde a variável $image da parte <?php echo $image[0]; ?> está sendo setada. Provavelmente, ele ta requisitando a imagem no tamanho 'thumbnail'. Vais precisar mudar para requisitar a imagem no tamanho completo: 'full'.

Mesmo mexendo no CSS pra setar a imagem em tamanho maior, ela vai ficar com uma qualidade péssima, pois vai esticar a imagem reduzida.

Como estas puxando o primeiro valor do array $image, é provavel que estejas usando a função wp_get_attachment_image_src.

 

Se for, adicione o valor do tamanho após o ID do attachment. Algo como:

wp_get_attachment_image_src( $attachment_id, 'full' );

[Marlon Pacheco 132]

Olha esse trecho do teu código:

<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php bloginfo('template_directory'); ?>/images/thumbnail.png&w=290&h=160"...>

Eu cortei um pedaço, então só esse pedaço não funciona.

Você está usando um plugin de thumbnail para exibir as imagens.

E acabei de ver que há um else entre o teu código. Qual é o if ?

[erickcouto 6]

Bom pessoal vlw pela ajuda vou encerrar o topico pq resolvi começar do 0 com o tema padrao para trabalhar em cima, talvez apareça varias outras duvidas mas essa ta resolvida nesse novo tema rsrs

 

 

Masss mexendo no tema antigo que citei nos post acima, olha o que encontrei no functions.php

// Add post thumbnail functionality
add_theme_support('post-thumbnails', array('post'));

add_image_size('post-image', 610, 250, true);
add_image_size('featured-image', 516, 340, true);
add_image_size('featured-image-thumb', 70, 60, true);
add_image_size('widget-image', 290, 160, true);
add_image_size('widget-image-thumb', 50, 50, true);
add_image_size('media-thumb', 140, 90, true);
add_image_size('related-thumb', 134, 90, true);

Será que era isso o problema ? rs

 

vlww

[Rafael Sirotheau 43]

Então, como falei... O tema ta requisitando a imagem no tamanho 'widget-image', que é 290x160. Precisas encontrar onde ele ta fazendo essa chamada (é provável que seja a wp_get_attachment_image_src, ou algo parecido), e troca o argumento 'widget-image' para 'full'.