J'ai différentes images encapsulées dans des blocs de style carré sur lesquels je voudrais toujours centrer, mais je passe beaucoup de temps à essayer de les amener à le faire.
J'ai fait un exemple de ce qui m'arrive dans une conception similaire. Notez que le produit (le gril) n'est pas réellement centré dans le conteneur imgblock .
Cela commence à devenir très apparent avec d'autres images de produits qui sont beaucoup plus larges que réduites.
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
max-height:100%;
max-width:100%;
margin:auto;
display:block;
}
4 Réponses :
Vous pouvez ajouter display: flex à imgBlock , puis centrer horizontalement avec justify-content et verticalement avec align-items .
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
.imgBlock {
display: flex;
align-items: center;
justify-content: center;
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
max-height:100%;
max-width:100%;
margin:auto;
display:block;
}
si je peux, l'image doit être au centre du imgBlock
@kukkuz Pourquoi cependant? Vous définissez imgBlock sur 100x100px et imgBlock img sur 100x100% pour que l'image soit toujours de la même taille que imgBlock .
Oui, @kukkuz a raison. Le problème que j'avais était un assortiment dynamique de tailles d'image pour s'adapter à une taille de conatiner définie (dans ce cas, imgBlock 100 px par 100 px)
@kukkuz @ robert-ochinski J'ai mis à jour ma réponse au centre dans imgBlock .
@seantunwin maintenant ça marche :) - dans votre réponse précédente, container était la flexbox, maintenant vous avez correctement fait de imgBlock une flexbox ...
Commencez par régler l'image sur toute la largeur et la hauteur (ou comme vous le souhaitez). Vous pouvez maintenant ajouter object-fit: contain pour contenir l'image dans imgBlock et maintenant utiliser object-position: center pour l'aligner - voir démo ci-dessous:
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
height:100%; /* set full height */
width:100%; /* set full width */
display:block;
object-fit: contain; /* constrains the image maintaining aspect ratio */
object-position: center; /* default position is center - so optional in this case */
}
Vous pouvez définir la position par rapport à votre div .imgBlock .
Après cela, définissez la position absolue sur votre
N'oubliez pas qu'une position absolue est référée au parent le plus proche avec la position relative.
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
.imgBlock {
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
position:relative;
}
.imgBlock img{
max-height:100%;
max-width:100%;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Vous pouvez utiliser les anciens attributs de positionnement ainsi que les techniques Flex. Rendre relative la position du bloc principal. Ensuite, définissez l'image à l'intérieur de ce bloc sur la position: absolue. Placez cet élément de bloc en haut: 50% à gauche: 50% de l'élément parent. Comme cela passe par le coin supérieur gauche, il sera légèrement au centre. Nous utiliserons ensuite transform: translate (-50%, -50%) pour le ramener au vrai centre.
Plus d'informations sur position ici au MDN.
<div class="container">
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
</div>
<div class="imgBlock">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
</div>
</div>
.imgBlock {
position: relative;
width:100px;
height:100px;
border:2px solid black;
margin:1px;
padding:4px;
}
.imgBlock img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height:100%;
max-width:100%;
display:block;
}
cette méthode ne semble-t-elle pas une sorte de hack par rapport à une solution réelle? Je sais que cela fonctionne et je l'ai utilisé dans le passé, mais je me sens tellement mal de le faire.
Ce que nous utilisons aujourd'hui, c'est à cause du piratage informatique et repose sur des fondations et des principes tels que ceux-ci. Vous pourriez argumenter une méthode plutôt qu'une autre, mais je pense que cela se résumerait au contexte et à son utilisation. En outre, j'ai mentionné une autre méthode et déclaré que c'était la plus ancienne façon de le faire. Sans la solution complète, pouvons-nous vraiment dire ce qu'est un hack et quel est un correctif pour accéder à la prochaine version du projet? :)
Bonne lecture: alligator.io/css/cropping-images-object-fit
@FeaturedSpace, j'ai donc utilisé l'ajustement d'objet dans le passé, et c'est incroyable. Mais je suis toujours mort dans l'eau en essayant de centrer l'image avec ou sans ajustement d'objet.
utilisez
object-fitetobject-position- voir jsfiddle.net / uq8mta0L@kukkuz en fait une réponse pour que je puisse la vérifier :)
Mise à jour de ma réponse pour le centrage sur
imgBlock