Objet-fit: couverture; alternative?

J'ai une image sur ma page que je veux garder le ratio de mais de les redimensionner selon la taille de l'écran. J'aimerais qu'il sorte que la plus petite de la largeur et de la hauteur est faite pour correspondre à l'élément exactement, et la plus grande dimension des débordements de l'élément.

J'ai trouvé le

object-fit: cover;

style qui convienne à mes besoins, mais très vite remarqué que le soutien pour ce qui est extrêmement limitée (presque opera uniquement). Est-il autre chose que je peux l'utiliser pour y parvenir?

Merci beaucoup d'avance 🙂

source d'informationauteur Dan

  1. 17

    Si vous êtes en mesure d'ajouter cette image à la page comme un arrière-plan, vous pouvez utiliser:

    background-size: cover;

    Cette propriété peut également accepter contain valeur. Expérimenter un peu à la fois et vous verrez la différence.

    cover les forces de l'image à remplir l'ensemble du conteneur. Il signifie que l'image sera recadrée si son ratio ne correspond pas du conteneur ratio.

    contain les forces de l'image à ajustement dans le conteneur. Cela signifie que l'image ne sera jamais sortir des limites du conteneur. Si les ratios (image et conteneur) sont différents, il y aura des espaces vides sur les côtés de l'image (gauche & à droite ou en haut & en bas).

    cover et contain valeurs sont pris en charge en conséquence:

    Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1