CSS affiche une image redimensionnée et recadrée

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:

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?

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/>.

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>

css3 image de fond taille d'arrière-plan

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">

.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.

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

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>

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

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;
}

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/

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>

<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;
}

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.

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)

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]

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 .

<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*/
}

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}

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.

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)