web-dev-qa-db-fra.com

Réduire l'image CSS pour qu'elle contienne div, sans spécifier la taille de l'original

Je souhaite avoir un site Web sur lequel 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 je compte 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 ça ne marche pas. 

htmlcssscaling
40
Muteking

Vous pouvez utiliser un image d’arrière-plan pour ce faire;

De MDN - Taille de l’arrière-plan: contient :

Ce mot-clé indique que l'image d'arrière-plan doit être redimensionnée au maximum tout en garantissant que ses dimensions sont inférieures ou égales aux dimensions correspondantes de la zone de positionnement de l'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>
52
dc5

C'est une vieille question que je connais, mais celle-ci figure dans le top cinq pour plusieurs recherches Google apparentées. Voici la seule solution CSS sans changer les images en images d'arrière-plan:

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

Auto augmentera (ou diminuera) la largeur et la hauteur pour occuper l'espace spécifié par MaxSize. Il dépassera toutes les valeurs par défaut pour les images que vous ou le navigateur du spectateur pourraient avoir pour les images. J'ai trouvé que c'était particulièrement important sur Firefox d'Android. Les pixels ou les pourcentages fonctionnent pour une taille maximale. Lorsque la hauteur et la largeur sont définies sur auto, le rapport de format de l'image d'origine est conservé.

Si vous souhaitez remplir entièrement l'espace et que l'image soit plus grande que sa taille d'origine, modifiez les deux largeurs max en min-width: 100% - cela les fera occuper complètement leur espace et conserver leur aspect. Vous pouvez voir un exemple de cela avec l'image d'arrière-plan d'un profil Twitter.

14
Woody Payne

si vous voulez à la fois la largeur et la hauteur, vous pouvez essayer 

 background-size: cover !important;

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

7
Chathuranga

Je pense que c’est la meilleure façon de le faire, j’ai essayé et cela fonctionne très bien.

#img {
  object-fit: cover;
}

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

3
Josh Werner

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

3
Nikhil Rathod

J'espère que cela répondra au vieux problème (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
Moonis Abidi

Plusieurs de ces choses n'ont pas fonctionné pour moi ... cependant, cela a fonctionné. Peut aider quelqu'un d'autre dans le futur. 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
Blake

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 je devais faire, c’était utiliser une seule ligne CSS: overflow:hidden; et c’est tout. L'image évolue parfaitement. 

Ce qui est particulièrement agréable, c’est que css est pur et fonctionnera même si le 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
user4864716

J'utilise ceci, 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
Flavio