CSS réduire l'image pour s'adapter à contenant div, sans spécifier la taille d'origine

Je veux avoir un site Web où je peux télécharger des images de différentes tailles à afficher dans un curseur jquery. Je n'arrive pas à adapter (réduire) l'image dans un div contenant. Voici comment j'ai l'intention de le faire

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

Et le CSS

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

J'ai essayé de définir la largeur maximale de mon image à 100% en CSS. Mais qui se complique pas de travail.

39
demandé sur Volker E. 2013-09-04 10:02:25

10 réponses

Vous pouvez utiliser une image d'arrière-plan pour ce faire;

De MDN- Taille D'arrière-plan: contient :

Ce mot clé spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi grande que possible tout en s'assurant que ses deux dimensions sont inférieures ou égales aux dimensions correspondantes de la zone de positionnement d'arrière-plan.

Démo

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>
50
répondu dc5 2013-09-04 06:38:03

C'est une vieille question que je connais, mais c'est dans le top cinq pour plusieurs recherches Google connexes. Voici la solution CSS uniquement sans changer les images en images d'arrière-plan:

width:auto;
height:auto;
max-width:MaxSize;
max-height:MaxSize;

Auto augmente (ou diminue) la largeur et la hauteur pour occuper L'espace que vous spécifiez avec MaxSize. Il surmontera toutes les valeurs par défaut pour les images que vous ou le navigateur du spectateur pourriez avoir pour les images. J'ai trouvé que c'est particulièrement important sur Firefox D'Android. Les Pixels ou les pourcentages fonctionnent pour la taille maximale. Avec la hauteur et la largeur définies sur auto le rapport d'aspect de l'image d'origine seront conservées.

Si vous voulez remplir entièrement l'espace et que cela ne vous dérange pas que l'image soit plus grande que sa taille d'origine, changez les deux largeurs max en largeur min: 100% - cela les fera occuper complètement leur espace et maintenir la ration d'aspect. Vous pouvez voir un exemple de ceci avec l'image D'arrière-plan D'un profil Twitter.

13
répondu Woody Payne 2015-06-07 23:09:56

Si vous voulez à la fois la largeur et la hauteur, vous pouvez essayer de

 background-size: cover !important;

Mais cela ne déformera pas l'image mais remplira le div.

7
répondu Chathuranga 2014-01-10 09:24:36

C'est très simple. Il suffit de définir la largeur de img à 100%

3
répondu Nikhil Rathod 2013-09-04 06:19:51

Je crois que c'est la meilleure façon de le faire, je l'ai essayé et il fonctionne très bien.

#img {
  object-fit: cover;
}

C'est là que je l'ai trouvé. Bonne chance!

3
répondu Josh Werner 2017-07-02 10:35:34

J'espère que cela répondra au problème séculaire (sans utiliser CSS background property)

Html

<div class="card-cont">
 <img src="demo.png" />
</div>

Css

.card-cont{
  width:100%;
  height:150px;
}

.card-cont img{
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
}
2
répondu Moonis Abidi 2018-03-13 13:02:40

Dans une page Web où je voulais une image à l'échelle avec un changement de taille du navigateur et rester en haut, à côté d'un div fixe, tout ce que j'avais à faire était d'utiliser une seule ligne CSS: overflow:hidden; et ça a fait l'affaire. L'image évolue parfaitement.

Ce qui est particulièrement agréable, c'est que c'est du CSS pur et fonctionnera même si Javascript est désactivé.

CSS:

#ImageContainerDiv {
  overflow: hidden;
}

HTML:

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>
0
répondu Igor Ivancha 2016-02-06 09:54:17

J'utilise ceci, à la fois des images plus petites et plus grandes:

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
0
répondu Flavio 2017-09-03 13:55:34

Plusieurs de ces choses n'ont pas fonctionné pour moi... cependant, ce n'. Peut aider quelqu'un d'autre dans l'avenir. Voici le CSS:

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }
0
répondu Blake 2017-10-27 18:37:48

J'utilise:

Objet-fit: couverture;
-O-Objet-fit: couverture;

Pour placer des images dans un conteneur avec une hauteur et une largeur fixes, cela fonctionne également très bien pour mes curseurs. Il coupera cependant des parties de l'image en fonction de celle-ci.

-1
répondu Stefan Bogaard 2015-05-12 07:52:33