Mettre l'image à l'échelle pour l'adapter à un cadre de sélection

Existe-t-il une solution css uniquement pour mettre à l'échelle une image dans un cadre de sélection (en conservant les proportions)? Cela fonctionne si l'image est plus grande que le conteneur:

img {
  max-width: 100%;
  max-height: 100%;
}

Exemple:

• Cas d'utilisation 1 (fonctionne): http://jsfiddle.net/Jp5AQ/2/
• Cas d'utilisation 2 (fonctionne): http://jsfiddle.net/Jp5AQ/3/

Mais je veux agrandir l'image jusqu'à ce qu'une dimension soit 100% du conteneur.

• Cas d'utilisation 3 (ne fonctionne pas): http://jsfiddle.net/Jp5AQ/4/

Remarque: Même s'il s'agit de la réponse acceptée, la réponse ci - dessous est plus précise et est actuellement prise en charge dans tous les navigateurs si vous avez la possibilité d'utiliser une image d'arrière-plan.

Non, il n'y a pas de moyen CSS uniquement pour le faire dans les deux sens. Vous pourriez ajouter

.fillwidth {
    min-width: 100%;
    height: auto;
}

Pour que l'élément an ait toujours une largeur de 100% et ajuste automatiquement la hauteur au rapport hauteur / largeur, ou à l'inverse:

.fillheight {
    min-height: 100%; 
    width: auto;
}

pour toujours mettre à l'échelle la hauteur maximale et la largeur relative. Pour faire les deux, vous devrez déterminer si le rapport hauteur / largeur est supérieur ou inférieur à celui de son conteneur, et CSS ne peut pas le faire.

La raison en est que CSS ne sait pas à quoi ressemble la page. Il définit les règles à l'avance, mais ce n'est qu'après que les éléments sont rendus et que vous savez exactement à quelles tailles et à quels rapports vous avez affaire. Le seul moyen de détecter cela est d'utiliser JavaScript.

Bien que vous ne cherchiez pas de solution JS, j'en ajouterai quand même une si quelqu'un en a besoin. Le moyen le plus simple de gérer cela avec JavaScript est d'ajouter une classe basée sur la différence de ratio. Si le rapport largeur / hauteur de la boîte est supérieur à celui de l'image, ajoutez la classe "fillwidth", sinon ajoutez la classe "fillheight".

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

Grâce à CSS3, il existe une solution!

La solution consiste à mettre l'image en tant que background-image, puis à définir le background-sizesur contain.

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Testez-le ici: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Compatibilité totale avec les derniers navigateurs: http://caniuse.com/background-img-opts

Pour aligner le div au centre, vous pouvez utiliser cette variante:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Voici une solution hackish que j'ai découverte:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

Cela agrandira l'image dix fois, mais la limitera à 10% de sa taille finale, la liant ainsi au conteneur.

Contrairement à la background-imagesolution, cela fonctionnera également avec<video> éléments.

Exemple interactif:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

Aujourd'hui, dites simplement object-fit: contenir. Le support est tout sauf IE: http://caniuse.com/#feat=object-fit

html:

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

css:

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Vous pouvez accomplir cela avec du CSS pur et une prise en charge complète du navigateur, à la fois pour des images verticales et horizontales en même temps.

Voici un extrait de code qui fonctionne dans Chrome, Firefox et Safari (à la fois en utilisant object-fit: scale-downet sans l'utiliser):

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Une autre solution sans image de fond et sans besoin de conteneur (bien que les tailles maximales du cadre de sélection doivent être connues):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

Pour cela, vous auriez quelque chose comme:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

Cet exemple permet d'étirer l'image proportionnellement pour l'adapter à toute la fenêtre. Une improvisation au code correct ci-dessus consiste à ajouter$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

Il y a deux conditions si. Le premier vérifie si la hauteur de l'image est inférieure au div et applique la .fillheightclasse tandis que le suivant vérifie la largeur et applique la .fillwidthclasse. Dans les deux cas, l'autre classe est supprimée en utilisant.removeClass()

Voici le CSS

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Vous pouvez remplacer 100vhpar 100%si vous souhaitez étirer l'image par dans un div. Cet exemple permet d'étirer l'image proportionnellement pour l'adapter à toute la fenêtre.

Cherchez-vous à évoluer vers le haut mais pas vers le bas?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

Cependant, cela ne verrouille pas le rapport hauteur / largeur.

J'ai utilisé une table pour centrer l'image à l'intérieur de la boîte. Il conserve le rapport hauteur / largeur et redimensionne l'image d'une manière totalement à l'intérieur de la boîte. Si l'image est plus petite que la boîte, elle est affichée telle qu'elle est au centre. Le code ci-dessous utilise une largeur de 40 px et une zone de hauteur de 40 px. (Je ne sais pas si cela fonctionne bien car je l'ai supprimé d'un autre code plus complexe et l'ai simplifié un peu)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Le moyen le plus propre et le plus simple de le faire:

Tout d'abord un peu de CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

Le HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

Cela devrait faire l'affaire!

Cela m'a aidé:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

Ensuite sur l'élément (vous pouvez utiliser javascript ou media queries pour ajouter de la réactivité):

<div class='img-class' style='transform: scale(X);'></div>

J'espère que cela t'aides!

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

J'édite ma réponse pour expliquer davantage ma soluton car j'ai un vote négatif.

Avec les styles définis comme indiqué ci-dessus en css, maintenant le div html suivant montrera que l'image s'ajustera toujours dans le sens de la largeur et ajustera le rapport hauteur / largeur élevé. Ainsi, l'image sera mise à l' échelle pour s'adapter à une boîte englobante comme demandé dans la question.

<div class="boundingbox"><img src="image.jpg"/></div>