CSS Afficher une image redimensionnée et recadrée

https://stackoverflow.com/questions/493296

20-08-2019
|

Question

Je souhaite afficher une image à partir d'une URL d'une certaine largeur et hauteur, même si son rapport de taille est différent. Je souhaite donc redimensionner (en maintenant le rapport), puis couper l'image à la taille souhaitée.

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

Exemple:

Cette image:

entrer la description de l'image ici

A la taille 800x600 pixels et je veux apparaître comme une image de 200x100 pixels

Avec 200x150px je peux redimensionner l'image <=>:

<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 <=> je peux couper l’image <=> 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?
Redimensionnez l'image et coupez-la à la taille souhaitée?

La solution

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 une valeur négative margin pour déplacer l'image dans les <div/>.

Autres conseils

Avec CSS3, il est possible de changer la taille d'un background-image avec background-size , atteindre les deux objectifs en même temps.

Il existe de nombreux exemples sur css3.info .

mis en œuvre à partir de votre exemple , à l'aide de donald_duck_4.jpg . Dans ce cas, background-size: cover; correspond exactement à ce que vous souhaitez - il convient de <div> couvrir l'ensemble de la zone contenant le <=> contenant les éléments en excès (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 background-image taille de l'arrière-plan

Avez-vous essayé de l'utiliser?

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

Je devais redimensionner l'image, centrer (verticalement et horizontalement) et ensuite la rogner.

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

Voici les codes CSS et HTML de 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 avec essentiellement recadrer 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 dans 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>

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

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

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

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

Dans la classe de recadrage, placez 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>

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

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 largeur et de la hauteur de l'image. Et le recadrage se fait par propriété du clip.

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

Vous pouvez placer la balise img dans une balise div et faire les deux, mais je vous déconseille de redimensionner les images dans le navigateur. La plupart du temps, il fait un travail moche car les navigateurs ont des algorithmes de redimensionnement très simplistes. Mieux vaut faire votre mise à l'échelle dans Photoshop ou ImageMagick d'abord, puis le servir au client gentiment et joliment.

Ce que j'ai fait est de créer un script côté serveur qui redimensionnera et recadrera une image côté serveur afin qu'il envoie moins de données sur le site Web.

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

Il y a services comme Filestack qui le fera 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 facile.

Votre image ressemblerait à ceci après le redimensionnement à 200x100 mais en conservant le rapport hauteur / largeur

L’URL complète 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]

<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 le <div> peut-être donner à la div une classe dire <div class="example" style=url('../your_image.jpeg');> pour qu'il devienne div.example{ background-size: cover}

Je devais le faire récemment. Je voulais créer un lien miniature vers un graphique de la NOAA. Comme leur graphique pouvait changer à tout moment, je voulais que ma vignette change avec. Cependant, leur graphique présente un problème: il comporte une énorme bordure blanche en haut. Si vous le redimensionnez pour que la vignette devienne une miniature, vous obtiendrez des blancs superflus dans le document.

Voici comment je l'ai résolu:

http://sealevel.info/example_css_scale_and_crop.html

Tout d'abord, je devais faire un peu d'arithmétique. L’image originale de la NOAA est 960 & # 215; 720 pixels, mais les soixante-dix premiers pixels sont une zone de bordure blanche superflue. J'avais besoin d'un 348 & # 215; 172 vignette, sans la zone de bordure supplémentaire en haut. Cela signifie que la partie souhaitée de l'image d'origine est comprise entre 720 et 70 = 650 pixels de haut. J'avais besoin de réduire cela à 172 pixels, c'est-à-dire 172/650 = 26,5%. Cela signifie que 26,5% de 70 = 19 rangées de pixels doivent être supprimées en haut de l'image redimensionnée.

Donc & # 8230;

Définissez la hauteur = 172 + 19 = 191 pixels:

height = 191
Définissez la marge inférieure sur -19 pixels (raccourcissant l'image à une hauteur de 172 pixels):

margin-bottom: -19 pixels
Définissez la position supérieure sur -19 pixels (décalage de l'image vers le haut de sorte que les 19 rangées de pixels supérieures débordent & et sont masquées au lieu de celles du bas):

haut: -19 pixels

Le code HTML obtenu se présente comme suit:

<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 constater, j’ai choisi de styliser le < contenant; un > balise, mais vous pouvez appeler un < div > ;, à la place.

Un des artefacts 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.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow