Padding automatique d'une image dans un bloc

Bonjour,

Une vraie question de débutant...

Dans un bloc dont les dimensions sont connues une image dont les dimensions sont connues.

Par exemple :

<div>
<img src="mon image" alt="" />
</div>

div {width: 300px; height: 200px; display: grid; place-content: center}
img {width: 200px; height: 160px}

Y a-t-il un moyen d'appliquer un padding automatique de façon à ce que l'image + le padding occupe tout le Div ?

La finalité est de rendre l'image cliquable sur toute la taille du Div.

margin: auto fonctionne, y -t-il une déclaration équivalente pour le padding ?

J'espère que ce n'est trop confus...

Hello.

Je ne pense pas que ce soit si simple

Par contre ce qui me choque, c'est que tu parles d'image cliquable sans qu'il y ait un lien ou un button.

Si ton div était un lien ou un button, ça résoudrait le problème... Et ce serait plus accessible !

Bonjour Raphaël,

Merci de ton suivi.

Raphael a écrit :
Par contre ce qui me choque, c'est que tu parles d'image cliquable sans qu'il y ait un lien ou un button.

Oui, tu as raison.
Il s'agit d'un carrousel d'images, cela fait suite à cette discussion.

Je suis parti d'une simple liste d'images.

<figure class="diap">
  <img src="https://dummyimage.com/200x150/abc" id="a" tabindex="0">
  <img src="https://dummyimage.com/400x300/abc">
  <img src="https://dummyimage.com/200x150/cba" id="b" tabindex="0">
  <img src="https://dummyimage.com/400x300/cba">
  <img src="https://dummyimage.com/200x150/afc" id="c" tabindex="0">
  <img src="https://dummyimage.com/400x300/afc">
</figure>

Le problème c'est que dans la réalité les images n'ont pas toutes la même taille.

Plutôt que de me livrer à des calculs complexes pour ajuster le padding de chaque image, j'ajoute aux grandes images un parent facile à dimensionner, mettons <a>.

<figure class="diap">
  <img src="https://dummyimage.com/200x150/abc" id="a" tabindex="0">
  <a><img src="https://dummyimage.com/400x300/abc"></a>
  <img src="https://dummyimage.com/200x150/cba" id="b" tabindex="0">
  <a><img src="https://dummyimage.com/400x300/cba"></a>
  <img src="https://dummyimage.com/200x150/afc" id="c" tabindex="0">
  <a><img src="https://dummyimage.com/400x300/afc"></a>
</figure>

Ce faisant je doit modifier le javascript.

Si l'image pouvait être l'élément cliquable j'aurais moins de changements à faire dans le javascript...

C'est surtout cette ligne qui me pose problème :

let activeImg = document.activeElement.getAttribute('src');

Par ailleurs la question posée sur une sorte de padding: auto est générale et peut intéresser du monde.

boteha_2 a écrit :

Il s'agit d'un carrousel d'images, cela fait suite à cette discussion

Houla. Alors j'ai commencé à suivre la discussion et j'ai cru comprendre que ton slider semblait corrigé et fonctionnel dès la première page (merci gcyrillus), puis j'ai l'impression que ça part un peu dans tous les sens, avec du JS qui débarque d'un coup, jusqu'à en faire un sujet de 5 pages !

Je n'ai franchement pas le courage de suivre toute l'évolution du cahier des charges pour comprendre pourquoi la solution initiale et très simple de gcyrillus ne convient plus.

Et pour le coup, pour répondre à ta question : non, on ne peut pas ajouter des `padding: auto` qui couvriraient la surface restante.

Bonjour,

Pour le padding, tu penses probablement à une "astuce" basée sur des valeur vw ou cqw déduites de la largeur connue de l'image pour appliquer un padding valide jusqu'a ce qu'il passe en valeur négative.... mais cela est totalement inutile pour une image.

Tu as object-fit: contain avec un width:100% et un height défini qui fera ce que tu as besoin.

Reprise de ton CSS pour l'exemple:

div {
  width: 600px;
  height: 200px;
  display: grid;
  align-items: center;/* pas place-content ! */
  margin: auto;
}
img {
  width: 100%;
  height: 160px;
  object-fit: contain;
}

img:hover {
  outline: 3px blue dashed;
}

note que tu peut laisser tomber grid et simplement faire height+width 100% sur l'image qui se centrera toute seule sans déborder voir: https://codepen.io/gc-nomade/pen/jEMYwre .
Modifié par gcyrillus (26 Mar 2026 - 14:01)

Bonjour,

Raphael a écrit :
Je n'ai franchement pas le courage de suivre toute l'évolution du cahier des charges pour comprendre pourquoi la solution initiale et très simple de gcyrillus ne convient plus.

Je te comprends mais ce n'est pas parti dans tous les sens et la solution patiemment développée par gcyrillus en 5 pages est parfaitement opérationnelle, fiable et rapide.
J'ai expliqué la justification de la nouvelle petite modification du code html qui vise à faciliter la gestion des images de tailles diverses.
Actuellement, côté serveur il est identifié l'image la plus haute, puis le padding de chaque image est adapté dans une feuille de style dynamique de façon à ce que toutes les hauteurs img +padding soient égales.
C'est un peu une usine à gaz...

gcyrillus a écrit :

Tu as object-fit: contain avec un width:100% et un height défini qui fera ce que tu as besoin.

MERCI, je teste au plus vite, je reviens vers vous.

Hello,

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Effectivement, c'est exactement l'effet désiré, encore MERCI à gcyrillus.

Avec box-sizing: border-box; il est même possible de s'autoriser un petit padding: 0.625rem

Et plus besoin d'avoir le parent en grid pour centrer l'image.

D'après MDM le support de object-fit est bon.

Que des bonnes nouvelles à ce stade.
Modifié par boteha_2 (26 Mar 2026 - 23:08)

Je rebondis sur la question de l’accessibilité posée par Raphaël.

L'image dont je parle est l'image principale d'un carrousel.

img.image_principale {cursor: zoom-in}

Cliquer sur cette image principale ouvre le carrousel dans un pop-up agrandissable.
C'est une version de la loupe, selon moi efficace.

Naturellement c'est un javascript qui provoque l'ouverture du pop-up.

En logique html et accessibilité quel est le meilleur élément pour encadrer cette <img /> principale qui est enfant de <figure> ?
<a>, <div>, <button>, autre ?
Faut-il un aria-label ou équivalent ?

En gros quel élément pour signaler un pop-up ?