CSS Afficher une Image Redimensionnée et Recadrée

Je veux afficher une image à partir d'une URL avec une certaine largeur et la hauteur, même si il a un autre rapport à sa taille.
Donc, je veux redimensionner (maintien du rapport) et de découper l'image à la taille que je veux.

Je peux redimensionner avec html img bien et je peux le couper avec background-image.

Comment puis-je faire les deux?

Exemple:

Cette image:

A la taille 800x600 pixels et je veux montrer une image de 200x100 pixels

Avec img je peux redimensionner l'image 200x150px:

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

Qui me donne ceci:

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

Et avec background-image je peux couper l'image 200x100 pixels.

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

Me donne:

<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 couper à la taille que je veux?

InformationsquelleAutor InfoStatus | 2009-01-29

449

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

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

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
```
HTML:
```
    <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 à l'intérieur de la <div/>.
- Notez que si vous définissez la position:relative sur le contenu de l'image, vous aurez besoin de mettre en position:relative sur la div contenant. Si vous ne le faites pas, j'ai trouvé que IE ne sera pas réellement clip de l'image.
- également supprimer hauteur de .culture img classe
- Il ne fonctionne pas si vous avez supprimé la hauteur de la déclaration
- Notez également que lors de l'utilisation de css pour rogner une image, l'utilisateur a toujours du téléchargement de l'image. Il pourrait être préférable d'utiliser php et GD ou d'une autre image de l'édition de la bibliothèque de redimensionner et de recadrer l'image avant de l'envoyer à l'utilisateur. Tout dépend de ce que vous voulez, le chargement du serveur ou les utilisateurs de la bande passante.
- Juste une note pour les autres: .la hauteur de la culture et de la largeur de définir la tranche la plus bas et plus à droite de l'image. .culture img hauteur et la largeur de l'échelle de l'image. .culture img marge panoramique de l'image
- Supposons que nous ne connaissons pas la taille de l'image. Nous avons besoin de spécifier la marge à l'aide de Javascript. Droit? De sorte que peut provoquer un effet scintillant. Pouvez-vous penser à une autre solution?
- masquer l'image jusqu'à ce que votre JS s'exécute à l'aide visibility:hidden;
- Oui. il ne fonctionnera que si son comme un seul temps de rendu. Supposons que vous êtes rendu quelque chose dans un RSR, qui est la recherche que vous tapez. Et vous utilisez cette option pour afficher les images les résultats de la recherche. Donc, chaque fois que vous rendre la visibilité caché les images sans scintillement.
- il va travailler pour n'importe quel scénario si bien mis en œuvre. Par exemple, le rendu de l'image avec une classe spéciale js-hide-until-loaded puis retirez la classe lorsque l'image de l'événement onload de feux. onload="doSomething(this); $(this).removeClass('js-hide-until-loaded')"
- Mon souci était le faisant d'abord visibility:hidden et puis plus tard, de la rendre visible onload. Depuis que nous avons mis à jour une div dire à chaque seconde il va provoquer un léger scintillement. Vous ne pouvez pas makeout lorsqu'un texte scintille dans une SERP, mais pour les images de ses différents.
- Est-il possible de faire l'image recadrée est sensible? coding.smashingmagazine.com/2011/01/12/...
- vous avez juste à utiliser le pourcentage de la largeur et de peut-être un max-width sur l'image. La même approche devrait toujours s'appliquer
InformationsquelleAutor roborourke
132

Avec CSS3, il est possible de modifier la taille d'une background-image avec background-size, répondant à la fois à des objectifs à la fois.

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

En fonction de votre exemple, à l'aide de donald_duck_4.jpg. Dans ce cas, background-size: cover; est juste ce que vous voulez - il s'adapte à la background-image pour couvrir toute la zone de l'contenant <div> et des clips à l'excès (en fonction du ratio).

CSS:
```
.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;
}
```
HTML:
```
<div class="with-bg-size">Donald Duck!</div>
```
css3 background-image background-size
- Excellente solution, mais l'inconvénient est qu'il n'est pas compatible avec IE <9 (Si ce qui compte pour plus personne). Aussi, je voulais mentionner, si vous remettez le couvercle en place avec pour arrière-plan de la taille, il sera mis à l'échelle, mais pas de recadrer l'image.
- Est-il possible de faire ce travail avec img tags?
- Pour <img /> balises, regarde object-fit: cover et les valeurs correspondantes de la CSS Valeurs de l'Image et Remplacé le Contenu du Module Niveau 3 spécification.
InformationsquelleAutor Joel Purra
99

Avez-vous essayé de l'utiliser?

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

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

J'ai été heureux de trouver, qu'il pourrait être réalisé en une seule css en ligne.
Vérifiez l'exemple ici: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Ici est la CSS et HTMLcode de cet exemple:

CSS:
```
    .centered-and-cropped { object-fit: cover }
```
HTML:
```
    <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">
```
- Merci, je pense que c'est la méthode la plus simple et la plus universelle de chemin à faire - mais il ne semble pas fonctionner avec IE :/ Trouver les docs ici: developer.mozilla.org/de/docs/Web/CSS/object-fit
- CSS3 objet de l'ajustement n'est pas pris en charge par IE11 ou le BORD(14) caniuse.com/#feat=object-fit
- il est pris en charge à Bord de 16 ans, à venir bientôt. Si ses critiques et utilisé avec parcimonie, il pourrait être utilisé aujourd'hui
- En CSS3, nous pouvons essayer de toute façon img+objet en forme ou div+background-image. Jusqu'à présent, dans mon expérience, image de fond d'écran peut être utilisé pour s'adapter à des conditions supplémentaires.
- À compter de maintenant, c'est aussi soutenu par le Bord (ne sais pas depuis quand mais).
InformationsquelleAutor Anatolii Stepaniuk

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

La div contenant essentiellement de recadrer l'image en masquant le trop-plein.

InformationsquelleAutor Kelly Anderson

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

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

InformationsquelleAutor Rohit Chaudhary

6

Grâce sanchothefat.

J'ai une amélioration de votre réponse. La culture est très adapté pour chaque image, cette 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>
```
InformationsquelleAutor Pedro Reis
5

object-fit peut vous aider, si vous jouez avec <img> tag

Le code ci-dessous va recadrer votre image pour vous. Vous pouvez jouer avec object-fit
```
img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}
```
InformationsquelleAutor Hidayt Rahman

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

InformationsquelleAutor 151291

Dans la culture de la classe, lieu de la taille de l'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 code html ressemblera:

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

InformationsquelleAutor Deivide

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

InformationsquelleAutor Sergey Chechaev

2

Live Exemple:
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 par la largeur et la hauteur de la valeur de l'image. Et la récolte est réalisée par le clip de la propriété.

Pour des détails sur la propriété clip suivre:
http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

InformationsquelleAutor Md. Rafee
1

Vous pouvez mettre la balise img dans une balise div et de faire les deux, mais je déconseille de mise à l'échelle des images dans le navigateur. Il fait un mauvais travail la plupart du temps, car les navigateurs ont très simpliste de mise à l'échelle des algorithmes. De mieux à faire votre mise à l'échelle dans Photoshop ou ImageMagick d'abord, puis de le servir au client agréable et jolie.

InformationsquelleAutor Dave Markle
1

Ce que j'ai fait est de créer un serveur de script côté qui va redimensionner et recadrer une image sur le serveur de fin donc ça va envoyer le moins de données sur l'interweb.

Il est assez trivial, mais si quelqu'un est intéressé, je peux creuser et afficher le code (asp.net)
- CGI est probablement la méthode la plus portable (et de la bande passante efficace), à moins que l'OP a l'intention de permettre à l'utilisateur d'effectuer leurs propres redimensionnement et le rognage via Javascript.
InformationsquelleAutor Rob
1

Il y a services comme Filestack qui va le faire pour vous.

Ils prennent votre url de l'image et de vous permettre de redimensionner à l'aide de paramètres d'url. Il est assez facile.

Votre image devrait ressembler à ceci après le redimensionnement de 200x100, mais en gardant le ratio d'aspect

L'ensemble de l'url ressemble à ceci
```
https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg
```
mais l'important, c'est juste
```
resize=width:200/crop=d:[0,25,200,100]
```
- hahaha belle fiche
- nice plug peut - être, mais aussi un service génial (non, je ne suis pas payé pour dire ça 😉 ) - j'ai littéralement venons de signer et c'est plutôt cool
InformationsquelleAutor ferrantim

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

InformationsquelleAutor Krone

0

Si vous êtes en utilisant Bootstrap, essayez d'utiliser { background-size: cover; } pour la <div> peut-être donner le div de classe disent <div class="example" style=url('../your_image.jpeg');> de sorte qu'il devient
div.example{ background-size: cover}

InformationsquelleAutor rshah
0

J'avais besoin de le faire récemment. Je voulais faire une image-lien vers un graphique de la NOAA. Depuis leur graphique peut changer à tout moment, je voulais que ma vignette pour changer avec lui. Mais il y a un problème avec leur graphique: il a un énorme bordure blanche en haut, donc si vous venez de changer l'échelle pour faire de la vignette, vous vous retrouvez avec des étrangers espaces dans le document.

Voici comment je l'ai résolu:

http://sealevel.info/example_css_scale_and_crop.html

J'ai d'abord besoin de faire un peu d'arithmétique. L'image d'origine de la NOAA est de 960 × 720 pixels, mais le haut de soixante-dix pixels sont un superflu blanc zone frontalière. J'avais besoin d'une 348 × 172 vignettes, sans frontières supplémentaires au-dessus. Cela signifie que la partie souhaitée de l'image d'origine est de 720 70 = 650 pixels de haut. J'avais besoin de l'échelle jusqu'à 172 pixels, c'est à dire, 172 /650 = 26.5%. Cela signifiait que 26,5% des 70 = 19 lignes de pixels nécessaires pour être supprimé à partir du haut de l'image à l'échelle.

Donc...
1. Régler la hauteur = 172 + 19 = 191 pixels:
  
  hauteur=191
2. Définir la marge inférieure à -19 pixels (raccourcissement de l'image à 172 pixels de haut):
  
  margin-bottom:-19px
3. Définir la position de tête à -19 pixels (décalage de l'image vers le haut, de sorte que le top 19 des pixels des lignes de débordement & sont cachés au lieu de celles du bas):
  
  haut: 19px
Le 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 style qui contient <a> tag, mais vous pourriez le style a <div>, à la place.

Un artefact de cette approche est que si vous montrez de la frontière, la frontière supérieure sera absent. Depuis que j'utilise border=0 en tout cas, ce n'était pas un problème pour moi.

InformationsquelleAutor Dave Burton

Vous devez vous connecter pour publier un commentaire.