[Résolu]Img qui dépasse de son conteneur

Bonjour

Voila je travaille sur un template pour un blog Wordpress, et pour l'affichage de news j'ai deux tailles d'image à la une.
La première est de 312*312 sélectionné avec nth:child, et les 7 qui suivent sont de taille 312*152.

A l'heure actuel, soit j'indique une taille en hauteur maxi pour les 7 suivantes, et donc l'image est aplatie, soit l'image dépasse de son conteneur et du coup les images se mette les une sur les autres.

Voici si ça peut aider le code d'une vignette.

<article id="post-969" class="post-969 post type-post status-publish format-standard hentry category-articles" >
			<header>
				<a href="http://localhost/wordpress/?p=969">
			
				<div class="post-box-image">
					<img width="312" height="312" src="http://localhost/wordpress/wp-content/uploads/2012/11/312x312_vert.png" class="post-box-image wp-post-image" alt="post image" title="312x312_vert" />				</div>
				
				<div class="post-title">
					<h2>Test d&rsquo;un article avec 312*312 vert</h2>
				</div>
				
				</a>
			</header>
		</article>

.post-box header{
	position:relative;
	height: 151.25px;
	width: 312.5px;
	margin-bottom: 10px;
	float: left;
	margin-right: 10px;
}
.post-box article:nth-child(4) header{
	margin-right: 0px;
}
.post-box article:nth-child(7) header{
	margin-right: 0px;
}
.post-box header h2{
	padding: 5px;
	width: 312.5px;
	font-size:14px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.6)
}
.post-title{
	z-index: 2;	
	position: absolute;
	padding-top: 118px;
}
.post-box article:nth-child(1) h2{
	margin-top: 171px;
}
.post-box article:nth-child(1) img{
	float: left;
	width: 312px;
	max-height:312px;
}
.post-box-image{
	float: left;
	width: 312px;

}

En faite, car je ne suis peut être pas très clair, Je souhaiterai avoir une image à la une qui se met en 312x312 sur la première news affiché, puis en 312x152 sur les 7 suivantes, sans qu'il y ait une déformation.

Merci d'avance si vous avez quelque pistes à me proposer.
Modifié par Ced77 (29 Nov 2012 - 12:02)

Salut,

J'imagine que tu utilises l'image à la une ?
Si c'est le cas, tu peux utiliser add_image_size.
Cela te permettra de gérer 2 tailles différentes. Une pour la première news et la seconde pour les autres...

tm

Bonjour TM

Merci pour le plugins je ne connaissais pas et il peut s'avérer pratique.

Néanmoins dans le cas actuel, même si je peux avoir plusieurs taille d'images à la saisie de l'article, lorsque je rajoute un article, le premier va être décalé à la deuxième place et ainsi de suite.

A moins de revenir sur chaque article pour changer l'image, je rencontrerai le même problème.

Salut,
La propriété max-width peut peut-être t'aider?
Si tu peux mettre une démo en ligne ça serait plus facile.

Si tu utilises la fonction de Wordpress, pour chaque image à la une que tu ajoutes, il la redimensionne automatiquement aux différents formats. Tu as donc, quelle que soit la façon dont tu affiches tes articles, les deux tailles disponibles.

Ensuite, dans ton template (index.php, archive.php ou autre, c'est selon), tu indiques une taille pour la première image et l'autre taille pour le reste.
C'est automatique (c'est bien la magie du dynamique...) !

L'inconvénient de gérer ça côté CSS est que l'utilisateur chargera des images plus grandes que besoin.
Si tu persistes dans cette voie, tu peux gérer cela avec un conteneur à dimensions fixes autour de ton image avec une propriété overflow:hidden...

tm

Je vous remercie pour vos réponses. Effectivement les solutions actuels en CSS ( pour éviter la déformation ) me font charger des images plus grandes, et ça pose des problèmes de performances.

Je travail sur ton idée TM, merci.

Je vous remercie pour vos réponses. T'es informations TM m'ont beaucoup aider, et mon problème est résolu.

Voici le code mis dans mes boucles.

	
<?php $my_query = new WP_Query('cat=4&showposts=1');
	while ($my_query->have_posts()) : $my_query->the_post();
	$do_not_duplicate = $post->ID;?>
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
			<header>
				<a href="<?php the_permalink(); ?>">
			
				<div class="post-box-image">
					<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'large-thumb' ); } ?>
				</div>
				
				<div class="post-title">
					<h2><?php the_title(); ?></h2>
				</div>
				
				</a>
			</header>
		</article> 

	<?php endwhile; ?>
	<!-- -->
	
	<?php if (have_posts()) : while (have_posts()) : the_post(); 
	if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
			<header>
				<a href="<?php the_permalink(); ?>">
			
				<div class="post-box-image">
					<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'medium-thumb' ); } ?>				</div>
				
				<div class="post-title">
					<h2><?php the_title(); ?></h2>
				</div>
				
				</a>
			</header>
		</article> 

	<?php endwhile; endif; ?>

Modifié par Ced77 (29 Nov 2012 - 12:02)

Re,

Dans ta boucle Wordpress, tu peux aussi tester si le "current_post" est égal à 0 ou pas.
Et tu affiches le "the_post_thumnail" correspondant.

Un truc dans le genre ?

<?php if ( has_post_thumbnail() ): ?>
<div class="post-box-image">
  <?php if ( $my_query->current_post == 0 ){
    the_post_thumbnail( 'large-thumb' );
  }
  else
  {
    the_post_thumbnail( 'medium-thumb' );
  }
  ?>
</div>
<?php endif; ?>

tm
Modifié par tm™ (29 Nov 2012 - 13:19)

Effectivement c'est un peu plus court ^^

Merci beaucoup.