web-dev-qa-db-fra.com

Redimensionnement automatique des images HTML à l'aide de contraintes de pixel et de pourcentage

Comment puis-je ajouter une image à une page HTML en utilisant les contraintes suivantes:

  • Aucune mise à l'échelle autorisée (si la largeur de l'image est de 400 pixels, je ne souhaite pas le redimensionner à 600).
  • L'image doit être réduite si l'élément contenant est plus petit que l'image.
  • Conserver les proportions.

Par exemple, j'ai une image (400x300). Si l'élément contenant a une largeur de 600 pixels, j'aimerais afficher l'image en 400x300. Si l'élément contenant fait 200 pixels de large (par exemple, c'est un navigateur mobile), j'aimerais afficher l'image en 200x150.

Je recherche une solution CSS pure (si c'est possible) sans câbler la taille de l'image.

htmlcssimage
9
asalamon74

L'utilisation de la propriété max-width à deux reprises fonctionne correctement:

<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>
10
asalamon74

Vous devriez utiliser la propriété max-width:

<div style="width:600px">
<img src="images/image.jpg" alt="image" style="max-width:100%;/>    
</div>

Cela contraindra la largeur de votre image à l'élément div parent, en réduisant l'échelle si nécessaire. Il ne perdra pas son format d'image ni ne montera une image. max-width est supporté par tous les navigateurs récents, mais pas par IE6

6
AdamY

Cela ne réduit pas l'image. - asalamon74

J'ai inséré le code d'AdamY dans mon code HTML, ce qui réduit l'image. Voici quelques exemples des dimensions de l'image que j'ai: 800 x 626h, 962 x 640, 895 x 640. Pour ceux-ci et d’autres, il les a tous correctement mis à l’échelle - c’est-à-dire après l’ajout de 'style = "max-width: 100%;"' à la balise img, les images tiennent dans la largeur de mon conteneur (# photo-container) et doivent échelle. Ne dis pas que cela fonctionnera dans votre code, mais cela a fonctionné pour moi. Voici mon code CSS/HTML pertinent:

CSS:

#photo-container {display:block; float:left; width: 800px; 
                    margin-left:5px; margin-top:0px;
                    padding: 10px 10px 10px 10px;
                    background-color:black; color:white;
                    border-bottom-left-radius: 0.5em;
                    border-bottom-right-radius: 0.5em;
                }

HTML:

    <div id="photo-container">
        <img id="photo-display" src="PlaceHolder" alt="PlaceHolder"  
         style="max-width:100%;">
    </div>

Les images sont réellement placées en utilisant javascript. Le processus de sélection dans mon code javascript est un peu détaillé pour ce sujet, mais il équivaut essentiellement à:

photo-display.src=myimage;

Je ne l’ai pas essayé avec une photo dont la largeur est inférieure à 800.

2
David Morris

Il convient de noter que la propriété Width & Height doit être supprimée de votre balise IMG, sinon elle ne sera pas mise à l'échelle correctement.

1
Just Johnny

Par balise <img> sans utiliser de div box, etc.

img {
width: auto;
height: auto;
max-width: 100%;
}
1
K.Alex