J'ai un site qui a un tas d'images différentes à afficher, toutes des résolutions et des rapports d'aspect différentes. Existe-t-il un moyen facile de redimensionner et de recadrer des images à une certaine résolution? À mes fins, je veux que l'image redimensionnée soit 280x280.
Bien sûr, je ne peux que définir J'ai essayé Googling, mais en vain. mais cela va l'étirer. J'aimerais que cela soit plus petit des deux résolutions, faites un carré, puis prenez les pixels centraux. Par exemple, si la résolution est de 480x200, je souhaite qu'il prenne une section 200x200 hors du centre de l'image.
5 Réponses :
Une "véritable culture" d'images avec CSS n'est pas possible. Véritable culture signifie que l'image est réduite aux nouvelles valeurs et que la taille est plus petite, puis avant.
Mais il existe une solution avec des marges négatives ou un positionnement absolu, ce qui vous aidera beaucoup. J'ai utilisé cette technique plusieurs fois.
S'il vous plaît jeter un oeil à: Casser des images avec CSS
Cela semble assez prometteur. Je vais vérifier et voir si je peux le faire travailler
Vous pouvez définir la taille de toutes les images de votre site Web avec CSS:
img {
width: 280px;
height: 280px;
}
Ne pense pas que tu lis vraiment ma question. Je gère un blog musical et j'ai besoin de quelque chose pour réduire dynamiquement / cultiver les images pour chaque message. Je ne veux pas simplement les étirer, comme je l'ai dit dans ma question.
Oui, c'est pourquoi je vous ai dit que vous devez créer des vignettes via PHP;)
Vous n'avez pas dit si les utilisateurs ont téléchargé des images ou simplement les relier. Il y a une grosse différence.
Pas une réponse à la question. Op spécifiquement interrogé sur les techniques CSS.
Si vous définissez l'image comme un arrière-plan CSS, vous pouvez utiliser Fond -Size: la couverture | contient .
Vous pouvez utiliser la propriété Clip, destinée aux éléments de culture.
J'ai écrit un didacticiel à ce sujet il y a quelques semaines à Codrops: http://tympanus.net/codrops/2013/01/16/unerstanding-the-css-clip-property/ .
En fait, je suis tombé sur ce même problème récemment et a fini par une approche légèrement différente de la méthode de fond-image. L'autre différence principale est que ma façon ne suppose pas connaître la largeur et la hauteur de l'image - de sorte que cela fonctionnera de manière dynamique avec n'importe quelle image. Il nécessite un peu de jQuery cependant pour déterminer l'orientation des images (je suis sûr que vous pourriez utiliser un fichier JSL à la place).
J'ai écrit un Blog Post à ce sujet Si vous êtes intéressé par plus d'explication, mais le code est assez simple: p>
HTML : P>
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});
Je doute que vous puissiez le faire avec CSS
Que diriez-vous de PHP? Mon site utilise PHP, il s'agit également d'une option, à moins qu'il ne ralentit beaucoup le site Web.