CSS affiche une image redimensionnée et recadrée


334

Je veux montrer une image à partir d'une URL avec une certaine largeur et hauteur même si elle a un rapport de taille différent. Je veux donc redimensionner (en maintenant le rapport), puis couper l'image à la taille que je veux.

Je peux redimensionner avec la imgpropriété html et je peux couper avec background-image.
Comment puis-je faire les deux?

Exemple:

Cette image:

entrez la description de l'image ici


A la taille des 800x600pixels et je veux montrer comme une image de 200x100pixels


Avec imgje peux redimensionner l'image 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">


Cela me donne ceci:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">


Et avec background-imageje peux couper les 200x100pixels de l'image .

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Donne moi:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


Comment puis-je faire les deux?
Redimensionner l'image puis la couper à la taille souhaitée?

Réponses:


475

Vous pouvez utiliser une combinaison des deux méthodes, par exemple.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Vous pouvez utiliser négatif margin pour déplacer l'image dans le <div/>.


9
Notez que si vous définissez position: relative sur l'image contenue, vous devrez définir position: relative sur la div contenant. Si vous ne le faites pas, j'ai trouvé qu'IE ne coupera pas réellement l'image.
Frank Schwieterman

supprimer également la hauteur de la classe img .crop
Waqar Alamgir

@ waqar-alamgir Cela ne fonctionnerait pas si vous
supprimiez la

6
Notez également que lors de l'utilisation de CSS pour recadrer une image, l'utilisateur doit toujours télécharger l'image. Il peut être préférable d'utiliser php et GD ou une autre bibliothèque d'édition d'images pour redimensionner et recadrer l'image avant de l'envoyer à l'utilisateur. Tout dépend de ce que vous voulez, du chargement du serveur ou de la bande passante des utilisateurs.
J-Rou

15
Juste une note pour les autres: la hauteur et la largeur du recadrage définissent où trancher la partie la plus en bas et la plus à droite de l'image. .crop img hauteur et largeur met à l'échelle l'image. .crop img margin fera un panoramique sur l'image
Frederik

138

Avec CSS3, il est possible de modifier la taille d'un background-imageavec background-size, en remplissant les deux objectifs à la fois.

Il y a un tas d'exemples sur css3.info .

Implémenté sur la base de votre exemple , à l'aide de donald_duck_4.jpg . Dans ce cas, background-size: cover;c'est exactement ce que vous voulez - il s'adapte à background-imagepour couvrir toute la zone du contenant <div>et coupe l'excédent (en fonction du rapport).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>


1
Excellente solution, mais une mise en garde est qu'elle n'est pas compatible avec IE <9 (si cela compte pour tout le monde). En outre, je voulais mentionner que si vous remplacez la couverture par Contenir pour la taille de l'arrière-plan, elle sera mise à l'échelle, mais ne recadrera pas l'image.
Devnate

4
Pour les <img />balises, consultez object-fit: coverles valeurs associées de la spécification CSS Image Values ​​and Replaced Content Module Level 3 .
Joel Purra

111

Avez-vous essayé de l'utiliser?

.centered-and-cropped { object-fit: cover }

J'avais besoin de redimensionner l'image, de la centrer (verticalement et horizontalement) et de la recadrer.

J'étais heureux de constater que cela pouvait être fait en une seule ligne CSS. Vérifiez l'exemple ici: http://codepen.io/chrisnager/pen/azWWgr/?editors=110


Voici le code CSSet HTMLde cet exemple:

.centered-and-cropped { object-fit: cover }
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">


2
Merci, je pense que c'est la voie la plus simple et la plus universelle - mais cela ne semble pas fonctionner avec IE: / Trouvez les documents ici: developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
L'ajustement d'objet CSS3 n'est pas pris en charge par IE11 ou EDGE (14) caniuse.com/#feat=object-fit
eye-wonder

1
@ eye-wonder, il est pris en charge dans Edge 16, qui sortira bientôt. S'il n'est pas critique et utilisé avec parcimonie, il pourrait être utilisé aujourd'hui
Ray Foss

En CSS3, nous pouvons essayer img + fit-object ou div + background-image. Jusqu'à présent, selon mon expérience, l'image d'arrière-plan peut être utilisée pour répondre à plus de conditions.
Eric

1
À partir de maintenant, cela est également pris en charge par Edge (je ne sais pas depuis quand).
Gerald Schneider

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

Le div contenant recadre essentiellement l'image en masquant le débordement.


13
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />

8

Merci sanchothefat.

J'ai une amélioration à votre réponse. Comme le recadrage est très adapté à chaque image, ces définitions doivent être au format HTML au lieu de CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

6
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

6

object-fitpeut vous aider si vous jouez avec le <img>tag

Le code ci-dessous recadrera votre image pour vous. Vous pouvez jouer avec l' ajustement d' objet

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Cela a fait ma journée - je pouvais facilement attacher cela à une diapositive dans mon implémentation de carrousel de curseur lisse - solution d'objet IMG simple et ne pas toucher à la "base de code du plugin de curseur"
andreas-supersmart

c'est l'avantage de CSS :)
Hidayt Rahman

5

Exemple en direct: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Explication: Ici, l'image est redimensionnée en fonction de la valeur de largeur et de hauteur de l'image. Et le recadrage se fait par la propriété clip.

Pour plus de détails sur la propriété du clip, suivez: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/


4

Dans la classe de recadrage, placez la taille d'image que vous souhaitez voir apparaître:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

Le html ressemblera à:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

3
<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

1

Vous pouvez mettre la balise img dans une balise div et faire les deux, mais je vous déconseille de redimensionner les images dans le navigateur. Il fait un travail moche la plupart du temps parce que les navigateurs ont des algorithmes de mise à l'échelle très simplistes. Mieux vaut faire votre mise à l'échelle dans Photoshop ou ImageMagick d'abord, puis servez-le au client gentil et joli.


1

Ce que j'ai fait, c'est de créer un script côté serveur qui redimensionnera et recadrera une image du côté serveur afin qu'il envoie moins de données à travers l'interweb.

C'est assez banal, mais si quelqu'un est intéressé, je peux rechercher et poster le code (asp.net)


CGI est probablement la méthode la plus portable (et la plus efficace en termes de bande passante), sauf si l'OP a l'intention de permettre à l'utilisateur d'effectuer son propre redimensionnement et recadrage via Javascript.
strager

1

Il existe des services comme Filestack qui le feront pour vous.

Ils prennent l'URL de votre image et vous permettent de la redimensionner à l'aide des paramètres d'URL. C'est assez simple.

Votre image ressemblerait à ceci après avoir été redimensionnée à 200x100 mais en gardant le rapport hauteur / largeur

L'URL entière ressemble à ceci

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

mais la partie importante est juste

resize=width:200/crop=d:[0,25,200,100]

entrez la description de l'image ici


belle prise peut-être - mais également - un service génial (non, je ne suis pas payé pour le dire ;-)) - Je viens de m'inscrire et c'est plutôt cool
Jonathan Lyon

1

Essayez d'utiliser la clip-pathpropriété:

La propriété clip-path vous permet d'attacher un élément à une forme de base ou à une source SVG.

Remarque: La propriété clip-path remplacera la propriété de clip obsolète.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

Plus d'exemples ici .


0
<div class="crop">
    <img src="image.jpg"/>
</div>
.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

0

Si vous utilisez Bootstrap, essayez d'utiliser { background-size: cover; }pour <div>peut - être donner à la classe une classe <div class="example" style=url('../your_image.jpeg');>pour qu'elle devienne div.example{ background-size: cover}


0

Je devais le faire récemment. Je voulais créer un lien miniature vers un graphique NOAA. Comme leur graphique pouvait changer à tout moment, je voulais que ma miniature change avec. Mais il y a un problème avec leur graphique: il a une énorme bordure blanche en haut, donc si vous le mettez à l'échelle pour créer la vignette, vous vous retrouvez avec des espaces étrangers dans le document.

Voici comment je l'ai résolu:

http://sealevel.info/example_css_scale_and_crop.html

J'ai d'abord dû faire un peu d'arithmétique. L'image originale de la NOAA est de 960 × 720 pixels, mais les soixante-dix premiers pixels sont une zone de bordure blanche superflue. J'avais besoin d'une vignette 348 × 172, sans la zone de bordure supplémentaire en haut. Cela signifie que la partie souhaitée de l'image d'origine est de 720 - 70 = 650 pixels de haut. J'avais besoin de réduire cela à 172 pixels, soit 172/650 = 26,5%. Cela signifiait que 26,5% de 70 = 19 lignes de pixels devaient être supprimées du haut de l'image mise à l'échelle.

Alors…

  1. Réglez la hauteur = 172 + 19 = 191 pixels:

    hauteur = 191

  2. Réglez la marge inférieure à -19 pixels (raccourcissant l'image à 172 pixels de haut):

    marge en bas: -19 px

  3. Réglez la position du haut sur -19 pixels (en déplaçant l'image vers le haut, de sorte que les 19 premières lignes de pixels débordent et soient masquées au lieu de celles du bas):

    haut: -19px

Le code HTML résultant ressemble à ceci:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Comme vous pouvez le voir, j'ai choisi de styliser la balise <a> contenante, mais vous pouvez plutôt styliser une <div>.

Un artefact de cette approche est que si vous affichez les bordures, la bordure supérieure sera manquante. Comme j'utilise border = 0 de toute façon, ce n'était pas un problème pour moi.


0

Vous pouvez utiliser le service de redimensionnement d'image de Kodem . Vous pouvez redimensionner n'importe quelle image avec un simple appel http. Peut être utilisé avec désinvolture dans le navigateur ou utilisé dans votre application de production.

  • Téléchargez l'image où vous préférez (S3, imgur etc.)
  • Branchez-le dans votre URL d'API dédiée (à partir de notre tableau de bord)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.