28172 sujets

CSS et mise en forme, CSS3

Recadrer et redimensionner une image pour en faire une vignette carré

Bonjour,

Je cherche à faire en CSS l'équivalent de ce qu'on fait dans InDesign quand on remplit un bloc avec une image en agrandissant celle-ci proportionnellement (CTRL/pom ALT Maj C).
D'essais en essais, je commence à me demander si c'est possible sans passer par un script.

Une image valant mille mots, voici le cadre du problème (c'est un résumé d'article sur une page-blog WordPress) :

http://i.imgur.com/i6aoTL9.png?1

Voici le css concerné :



.thumbnail:before { 
float:left; 
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); 
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); 
content: ""; 
top: 0; left: 0; 
width: 100%; height: 100% }

.thumbnail { 
float: left; 
width: 14.1em; 
height: 14.1em; 
margin: 7px 25px 30px 0; 
padding: 0; }


Merci d'avance de me faire part de vos suggestions éclairées !
Modifié par ryta (21 Apr 2015 - 00:13)
gc-nomade, Merci pour les liens.
Pour ce que j'ai compris des transform, ils ne permettent pas de changer les proportions de l'image.
En fait mon problème est lié au fait que je voudrais que l'image reste DANS le bloc en le remplissant sans déformation.
Si ça se trouve c'est un truc tout simple (ou pas).

Je continue à chercher...
Modérateur
Bonsoir,

Je te dirais bien de mettre l'image en background-image avec un background-size:cover; mais je ne sais pas si ça te conviendrai de ne pas avoir de balise img. Je lance quand même l'idée en passant.

Bonne nuit !
Bonjour,
ryta a écrit :
Une image valant mille mots, voici le cadre du problème (c'est un résumé d'article sur une page-blog WordPress)

Donc, on parle forcément d'une image à la Une appelée ici.
Dans ce cas, pourquoi ne pas tout simplement créer ta propre taille d'image, avec un redimensionnement pour en faire un carré dès l'upload ? C'est bien plus simple dans ton cas, et surtout, c'est fait pour ça Smiley smile 
add_image_size( 'custom_size', 200, 200, array( 'center', 'center' ) );

Ici, mes images à la Une de type custom_size feront 200x200, et le redimensionnement se fera à partir du centre de l'image.
> toute la doc sur le codex WP
Modifié par audrasjb (21 Apr 2015 - 09:37)
audrasjb a écrit :

Dans ce cas, pourquoi ne pas tout simplement créer ta propre taille d'image, avec un redimensionnement pour en faire un carré dès l'upload ? C'est bien plus simple dans ton cas, et surtout, c'est fait pour ça Smiley smile 
add_image_size( 'custom_size', 200, 200, array( 'center', 'center' ) );



Bonjour, merci de vos messages.

C'est bien ce que je veux faire, mais mes connaissances en php sont proches du 0 (d'où mon triturage du CSS...) et je ne sais pas où/comment intégrer ces morceaux de code.

Je suppose que ça concernerait ce passage du fichier functions.php :
function et_attach_bg_images() {
	$template_directory = get_template_directory_uri();
	$header_bg = et_get_option( 'vertex_header_bg_image', $template_directory .  '/images/bg.jpg' );

	if ( is_single() || is_page() || 'project' === get_post_type() && has_post_thumbnail() ) {
		if ( ( $et_custom_image = get_post_meta( get_the_ID(), '_et_single_bg_image', true ) ) && '' !== $et_custom_image ) {
			$header_bg = $et_custom_image;
		} else if ( has_post_thumbnail() ) {
			$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
			$header_bg = $image_attributes[0];
		}
	}


Tous mes essais aboutissent à... rien, page blanche sur le site !
Je continue à tester...

Bonne journée !
_laurent a écrit :

Je te dirais bien de mettre l'image en background-image avec un background-size:cover; mais je ne sais pas si ça te conviendrai de ne pas avoir de balise img. Je lance quand même l'idée en passant.


Merci de la suggestion mais en effet ça ne conviendra pas ici.
Sujet clos
Aller à