CSS affiche une image redimensionnée et recadrée

Question

Je veux afficher 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 conservant le rapport) puis couper l'image à la taille que je souhaite.

Je peux redimensionner avec 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 montrer comme 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">

Ça me donne ça :

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

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 que je souhaite ?

Answer 1

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 le négatif margin pour déplacer l'image à l'intérieur du <div/> .

Answer 2

Grâce à CSS3, il est possible de modifier la taille d'une icône background-image con background-size en remplissant les deux objectifs à la fois.

Hay une série d'exemples sur css3.info .

Mis en œuvre sur la base de votre exemple en utilisant donald_duck_4.jpg . Dans ce cas, background-size: cover; est exactement ce que vous voulez - il correspond à la background-image pour couvrir la totalité de la surface du contenant <div> et clipser l'excédent (en fonction du ratio).

.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 d'arrière-plan taille de fond

Answer 3

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

Answer 4

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

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

Answer 5

Essayez ça : http://dabblet.com/gist/4711695

Centre l'image verticalement dans son conteneur. Pas de javascript nécessaire.