Redimensionner et rogner des images avec CSS

Question

J'ai un site qui a un tas d'images différentes à afficher, toutes les différentes résolutions et les proportions. Est-il un moyen facile en CSS de redimensionner et recadrer les images à une certaine résolution? Pour mes besoins, je veux que l'image redimensionnée soit 280x280.

Bien sûr, je peux simplement définir <img height = '280' width = '280' /> mais cela va l'étirer. Je voudrais le plus petit des deux résolutions, faire un carré, puis prendre les pixels du centre. Par exemple, si la résolution est de 480x200 je veux qu'il prenne une section de 200x200 hors du centre de l'image. J'ai essayé Google, mais en vain.

Answer 1

une "vraie récolte" d'images avec css n'est pas possible. Real Crop signifie que l'image est réduite aux nouvelles valeurs et que sa taille est plus petite qu'auparavant.

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 à: Cropping images with CSS

Answer 2

Vous pouvez définir la taille de toutes les images sur votre site Web avec CSS:

img { 
    width: 280px; 
    height: 280px; 
} 

Le problème est, que certaines images semblera étrange à cause de leur aspect radio. La meilleure chose serait de créer différentes tailles de chaque image (mieux connu sous le nom de vignettes) lorsque vous les télécharger. Noot sur l'exécution, cela prendrait trop de temps.

Answer 3

Si vous définissez l'image comme arrière-plan CSS, vous pouvez utiliser background-size: cover|contain.

Answer 4

Vous pouvez utiliser la propriété de clip, destinée à rogner des éléments. J'ai écrit un tutoriel il y a quelques semaines à Codrops: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/.

Answer 5

Je suis récemment tombé sur ce même problème récemment et je me suis retrouvé avec une approche légèrement différente de l'image de fond. L'autre différence principale est que mon chemin ne suppose pas de connaître la largeur et la hauteur de l'image - donc cela fonctionnera dynamiquement avec n'importe quelle image. Il faut cependant un petit peu de jQuery pour déterminer l'orientation des images (je suis sûr que vous pourriez utiliser simplement JS à la place).

J'ai écrit un blog post about it si vous êtes intéressé par plus explaination mais le code est assez simple:

HTML:

<ul class="cropped-images"> 
    <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li> 
    <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li> 
</ul> 

CSS:

li { 
    width: 150px; // Or whatever you want. 
    height: 150px; // Or whatever you want. 
    overflow: hidden; 
    margin: 10px; 
    display: inline-block; 
    vertical-align: top; 
} 
li img { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 
li img.landscape { 
    max-width: none; 
    max-height: 100%; 
} 

jQuery:

$(document).ready(function() { 

    $('.cropped-images img').each(function() { 
     if ($(this).width() > $(this).height()) { 
     $(this).addClass('landscape');   
     } 
    }); 

});