web-dev-qa-db-fra.com

Échelle d'image pour s'adapter à un cadre de sélection

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

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

Exemple:

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

htmlcssimageresizeautoresize
97
Thomas Guillory

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 par tous les navigateurs si vous avez la possibilité d'utiliser une image d'arrière-plan. 

Non, il n'y a pas que le seul moyen de faire cela dans les deux sens. Tu pourrais ajouter

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

Pour qu'un élément ait toujours 100% de largeur et redimensionne automatiquement la hauteur au format, ou l'inverse: 

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

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

La raison en est que CSS ne sait pas à quoi ressemble la page. Il établit des règles à l'avance, mais ce n'est qu'après cela 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 avec JavaScript.

Bien que vous ne cherchiez pas une solution JS, je vais en ajouter une si quelqu'un en aurait besoin. Le moyen le plus simple de gérer cela avec JavaScript est d’ajouter une classe en fonction de 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>

85
Stephan Muller

Merci à CSS3, il y a une solution!

La solution consiste à placer l'image en tant que background-image, puis à définir le background-size sur 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 la 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%;
}
155
Thomas Guillory

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

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

Cela va décupler l'image, mais la limiter à 10% de sa taille finale, la liant ainsi au conteneur.

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

33
Vladimir Panteleev

Aujourd'hui, il suffit de dire object-fit: contenir. Le support est tout sauf IE: http://caniuse.com/#feat=object-fit

18
Glenn Maynard

Vous pouvez accomplir cela avec du CSS pur, pour des images de la même longueur, verticalement et horizontalement.

Voici un extrait qui fonctionne dans Chrome, Firefox et Safari (tous deux utilisant object-fit: scale-down et 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>

1
gabrielmaldi

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

Ceci ne verrouille cependant pas les proportions.

1
ericosg

Une autre solution sans image de fond et sans avoir besoin d’un conteneur (bien que les tailles maximales du cadre de sélection soient 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 */
}

Si l'utilisation du conteneur est requise, les valeurs max-width et max-height peuvent être définies sur 100%:

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

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;*/
}
1
Deke

J'ai utilisé la table pour centrer l'image à l'intérieur de la boîte. Il conserve les proportions et redimensionne l'image de manière totalement intégrée à la boîte. Si l'image est plus petite que la boîte, elle est affichée telle quelle au centre. Le code ci-dessous utilise une largeur de 40 pixels et une hauteur de 40 pixels. (Je ne sais pas trop à quel point cela fonctionne parce que je l'ai supprimé d'un autre code plus complexe et que je 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>
0
Antti

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 des requêtes javascript ou multimédia pour ajouter de la réactivité):

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

J'espère que cela t'aides!

0
bman93

Cet exemple permet d’agrandir proportionnellement l’image pour s’adapter à l’ensemble de la fenêtre ..__ Une improvisation pour le 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 si conditions. Le premier vérifie si la hauteur de l'image est inférieure à la div et applique la classe .fillheight tandis que le suivant vérifie la largeur et applique la classe .fillwidth . Dans les deux cas, l'autre classe est supprimée à l'aide de .removeClass().

Voici le CSS

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

Vous pouvez remplacer 100vh par 100% si vous souhaitez agrandir l'image avec un div. Cet exemple permet d’agrandir l’image proportionnellement à la totalité de la fenêtre.

0
Mr. JCRP

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

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!

0
Robert Eetheart