Le redimensionnement et le rognage des images avec les CSS

J'ai un site qui a un tas de différentes images à afficher, le tout de différentes résolutions et rapports d'aspect. Est-il un moyen facile de CSS pour redimensionner et recadrer des images à une certaine résolution? Pour mes fins, je veux de l'image redimensionnée pour être 280x280.

Bien sûr, je peux juste mettre <img height = '280' width = '280' /> mais cela va s'étirer. J'aimerais qu'il la plus petite des deux résolutions, faire un carré, puis prendre le centre pixels. Par exemple, si la résolution est 480x200 je veux prendre un 200x200 section du centre de l'image.

J'ai essayé de Googler, mais en vain.

Je doute que vous pouvez le faire avec du CSS
Comment au sujet de php? Mon site utilise php, donc c'est une option, à moins qu'il ralentit le site web beaucoup.

OriginalL'auteur jas7457 | 2013-02-26

  1. 9

    une "vraie culture" des images avec le css n'est pas possible. De vrais Crop signifie que l'image est réduite à de nouvelles valeurs et aussi de la taille est plus petite que la précédente.

    Mais il existe une solution avec des marges négatives ou de positionnement absolu, qui vous aidera beaucoup. J'ai utilisé cette technique à de nombreuses reprises.

    Veuillez jeter un oeil à:
    Recadrage d'images avec les CSS

    Cela a l'air assez prometteur. Je vais vérifier et voir si je peux le faire fonctionner

    OriginalL'auteur emjay

  2. 2

    Vous pouvez utiliser le clip des biens, destiné à des cultures éléments.

    J'ai écrit un tutoriel sur le sujet il y a quelques semaines à Codrops: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/.

    OriginalL'auteur Hugo Giraudel

  3. 0

    Si vous réglez l'image comme fond de CSS, vous pouvez utiliser background-size: cover|contenir.

    OriginalL'auteur Rowno

  4. 0

    En fait je suis tombé sur ce même problème récemment et a terminé avec une approche légèrement différente de l'image de fond d'écran. L'autre principale différence est que ma façon, ne présumez pas de connaître la largeur et la hauteur de l'image afin qu'il fonctionne de manière dynamique avec n'importe quelle image. Il nécessite un tout petit peu de jQuery mais pour déterminer l'orientation des images (j'ai' bien sûr, vous pourriez utiliser du JS au lieu de cela tout de même).

    J'ai écrit un blog post à ce sujet si vous êtes intéressés par plus d'explication, 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');        
      }
    });

});

    OriginalL'auteur FreddyBushBoy

  5. -1

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

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

    Le problème, c'est que certaines images un aspect étrange à cause de leur aspect et de la radio.
    La meilleure chose serait de créer différentes tailles de chaque image (mieux connu sous la forme de vignettes) lorsque vous les téléchargez. Noot de l'exécution, à la longue.

    Ne pensez pas que vous avez vraiment lu ma question. Je lance un musique blog et j'ai besoin de quelque chose à l'échelle de manière dynamique/rogner les images pour chaque poste. Je ne tiens pas à les étirer, comme je l'ai dit dans ma question.
    Oui, c'est pourquoi je vous ai dit que vous avez à créer des vignettes via PHP 😉
    Vous n'avez pas à savoir si les utilisateurs de télécharger des photos ou tout simplement un lien. Il y a une grande différence.
    Pas de réponse à la question. OP demandé spécifiquement sur les techniques CSS.

    OriginalL'auteur Chris