web-dev-qa-db-fra.com

Changer la taille de l'image via la DIV parent

J'ai essayé de le faire mais cela n'a pas changé la taille:

<div style="height:42px;width:42px">
   <img src="http://someimage.jpg">
</div>

Qu'est-ce qui le redimensionnera (je ne peux pas éditer/toucher l'élément img lui-même).

Merci d'avance.

htmlimage-size
14
funerr

Je ne suis pas sûr de ce que vous entendez par "je n’ai pas accès à l’image", mais si vous avez accès à parent div, vous pouvez procéder comme suit:

Les sapins donnent un identifiant ou une classe à votre div:

<div class="parent">
   <img src="http://someimage.jpg">
</div>

Puis ajoutez ceci à votre css:

.parent {
   width: 42px; /* I took the width from your post and placed it in css */
   height: 42px;
}

/* This will style any <img> element in .parent div */
.parent img {
   height: 100%;
   width: 100%;
}
25
Ilja

Appliquez 100% largeur et hauteur à votre image:

<div style="height:42px;width:42px">
  <img src="http://someimage.jpg" style="width:100%; height:100%">
</div>

De cette façon, il aura la même taille que son parent.

7
Sarfraz

En fait, utiliser 100% ne rendra pas l'image plus grande si l'image est plus petite que la taille de div que vous avez spécifiée. Vous devez définir l'une des dimensions, hauteur ou largeur, afin que toutes les images remplissent l'espace. D'après mon expérience, il est préférable de définir la hauteur de sorte que chaque rangée ait la même taille, puis que tous les éléments soient renvoyés à la ligne suivante correctement. Cela produira une sortie similaire à celle de fotolia.com (site Web avec image de stock)

avec css:

parent {
   width: 42px; /* I took the width from your post and placed it in css */
   height: 42px;
}

/* This will style any <img> element in .parent div */
.parent img {
   height: 42px;
}

sans pour autant:

<div style="height:42px;width:42px">
    <img style="height:42px" src="http://someimage.jpg">
</div>
0
JJ_Coder4Hire