CSS Afficher une image redimensionnée et recadrée
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:
A la taille 800x600 pixels et je veux apparaître comme une image de 200x100 pixels
Avec img je peux redimensionner l'image 200x150px:
<img
style="width: 200px; height: 150px;"
src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">
Cela me donne ceci:
<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">
Et avec background-image je peux couper l’image 200x100 pixels.
<div
style="background-image:
url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Donne moi:
<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;"> </div>
Comment puis-je faire les deux?
Redimensionnez l'image et coupez-la à la taille souhaitée.
Vous pouvez utiliser une combinaison des deux méthodes, par exemple.
<div class="crop">
<img src="..." alt="...">
</div>
CSS:
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
Vous pouvez utiliser une variable margin négative pour déplacer l'image dans le <div/>.
Avec CSS3, il est possible de changer la taille d'un background-image avec background-size , en remplissant les deux objectifs à la fois.
Il y a un tas d'exemples sur css3.info .
Implémenté sur votre exemple , en utilisant donald_duck_4.jpg . Dans ce cas, background-size: cover; correspond exactement à ce que vous voulez - il convient au background-image de couvrir toute la surface du <div> contenant et d'extraire l'excédent (selon le rapport).
.with-bg-size {
background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.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>
Avez-vous essayé d'utiliser cela?
.centered-and-cropped { object-fit: cover }
J'avais besoin de redimensionner l'image, de la centrer (verticalement et horizontalement) et de 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 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">
.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 à votre réponse. Comme le recadrage est très adapté à chaque image, ces définitions doivent être au format HTML plutôt que 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);
}
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 à ceci:
<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. 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/understanding-the-css-clip-property/
object-fitpeut vous aider si vous jouez avec la balise<img>
Le code ci-dessous recadrera votre image pour vous. Vous pouvez jouer avec object-fit
img {
object-fit: cover;
width: 300px;
height: 337px;
}
Vous pouvez mettre la balise img dans une balise div et faire les deux, mais je déconseille de redimensionner les images dans le navigateur. La plupart du temps, il fait un travail moche parce que 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 Nice et jolie.
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 trivial, 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 le redimensionner à l'aide de paramètres d'URL. C'est assez facile.
Votre image ressemblerait à ceci après le redimensionnement à 200x100 mais en conservant le rapport de format
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]
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. Mais 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 vignette, vous obtiendrez des espaces 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 de 960 × 720 pixels, mais les soixante-dix premiers pixels constituent 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 comprise entre 720 et 70 = 650 pixels de haut. Je devais réduire cela à 172 pixels, c'est-à-dire 172/650 = 26,5%. Cela signifiait que 26,5% de 70 = 19 rangées de pixels devaient être supprimées en haut de l'image redimensionnée.
Alors…
Définissez la hauteur = 172 + 19 = 191 pixels:
hauteur = 191
Définissez la marge inférieure sur -19 pixels (raccourcissant l'image à une hauteur de 172 pixels):
margin-bottom: -19px
Définissez la position supérieure sur -19 pixels (décalage de l'image vers le haut, de sorte que les 19 premières lignes dépassent et sont masquées au lieu de celles du bas):
top: -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 constater, j’ai opté pour le style de la balise <a> mais vous pouvez l’appeler <div>.
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.
<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 classe div une classe avec <div class="example" style=url('../your_image.jpeg');> pour qu'il devienne div.example{
background-size: cover}