web-dev-qa-db-fra.com

Comment redimensionner une image tout en conservant le rapport hauteur / largeur en CSS?

J'ai une grande image. Je veux l'afficher seul sur une page Web, et lorsque vous faites cela sans CSS, il remplit toute la page et est trop grand pour s'afficher à la fois (des barres de défilement apparaissent). Je veux le réduire afin qu'il s'adapte à la hauteur de l'écran de l'utilisateur (pas à la largeur). J'ai trouvé des solutions mais celles-ci étirent l'image pour s'adapter à l'ensemble de l'écran - je ne veux pas cela car cela ruine le rapport d'aspect.

Fondamentalement, je souhaite redimensionner une image tout en conservant les proportions. Comment puis-je faire cela?

htmlcssimage
35
user1447941

Réglez simplement width sur auto:

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

Voici le violon: http://jsfiddle.net/6Y5Zp/

44
Joseph Silber

voici l'exemple

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>
22
AKHIL P

Vous pouvez utiliser un div avec image d'arrière-plan et définir la taille d'arrière-plan: contenir:

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

Maintenant, vous pouvez simplement définir votre taille de div à tout ce que vous voulez et non seulement l'image conservera son rapport d'aspect, mais elle sera également centralisée à la fois verticalement et horizontalement. N'oubliez pas de définir les tailles sur le CSS car les divs n'ont pas l'attribut width/height sur la balise elle-même.

Cependant, la propriété background-size est par exemple> = 9.

7
Hoffmann

Je pense que vous devez coller une classe à l'intérieur de l'image que vous souhaitez afficher comme ceci

< image  class="image" >

et c'est la classe

.image 


 text align: center
 max width:pixels you want
 max height pixels you want

mais assurez-vous que les deux sont la même quantité de cette façon ne sortira pas de l'écran en hauteur et en largeur.

ou vous pouvez jouer avec la largeur et la hauteur

0
jose