Comment puis-je faire correspondre une image à l'intérieur d'un élément div lorsque l'image est plus large que div?

Question

J'ai une balise d'image dans un élément div.

<div id = "myDiv"> 
<img alt = "myImage" src = "some_source"/> 
</div> 

L'image est plus grande que div, donc l'image ne se trouve pas dans l'élément div. Tout d'abord, j'ai pensé à utiliser width = x, height = y. Mais comme je suis en train de dessiner la page, je crains de devoir m'inquiéter tout le temps de ces 2 dimensions. Comment puis-je conserver l'image dans l'élément div?

aussi, en respectant les dimensions de l'élément div?

Merci de nous aider

Answer 1

A partir de là: Three ways to resize images to fit a DIV

en utilisant l'attribut STYLE dans la balise IMG pour définir manuellement la largeur ou la hauteur pour chaque image (essentiellement les mêmes que # 1).

<div id="img_box"> 
<img style="width: 100%;" src="path/to/horizontal_image.jpg" /> 
</div> 
<div id="img_box"> 
<img style="height: 100%;" src="path/to/vertical_image.jpg" /> 
</div> 

Espérons que cela résout votre problème. Éditer: La meilleure solution consiste à redimensionner réellement l'image avec un script côté serveur. La mise à l'échelle des images dans le navigateur ne fonctionne généralement pas très bien.

Edit2: http://unstoppablerobotninja.com/entry/fluid-images

Answer 2

Cela a fonctionné pour moi.

.myimg {width:200px; height:auto;} 

Redimensionne automatiquement les images dans tous les navigateurs.

Answer 3

Après avoir passé trop de temps à chercher un moyen plus facile de faire cela, je combine les informations de la recherche pour le faire comme ceci: (en utilisant simplement la fonction getimagesize() -si la hauteur est plus grande que la largeur, étiquette d'image avec un style ayant une hauteur de 100% sinon, elle fait écho à la même étiquette d'image mais avec un style ayant une largeur de 100%);

$image = "path to your image"; 
$img_size = getimagesize($image); 

if ($img_size[0] < $img_size[1]){echo " < img src= '$image' style='height:100%;'>";} 
else {echo "< img src= '$image' style='width:100%;'>";} 

Answer 4

Depuis ce poste est d'un tout à l'heure, je me dis que je vais le mettre à jour avec une façon plus moderne de faire ce qui ne nécessite pas JS.

Je vous recommande d'utiliser les propriétés CSS background-size:cover et background-position: center à étirer, rogner et positionner l'image (en utilisant background-image pour définir l'image à la div).

Il va régler l'image pour rétrécir ou se développer pour s'adapter à la div entièrement puis recadrer tout ce qui est en dehors de la div. C'est un excellent moyen de gérer des images de formes et de tailles quelque peu différentes dans un div.

HTML

<div class="flexbox-container"> 
    <div class="filled-with-image"></div> 
</div> 

CSS

.flexbox-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: flex-end; 
    justify-content: center; 
} 

.filled-with-image { 
    width: 50%; 
    height:400px; 
    background-image: url(http://unsplash.it/1500/1000?image=875); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
    background-position: center bottom; 
} 

See the code here.