J'ai donc ce div où je veux afficher une image html à une dimension de 1200 par 630. Les images sont généralement plus petites que le conteneur. Si j'affiche l'image à l'aide de CSS background-image, background-size and background-position, une image de plus petite taille est insérée dans le conteneur en agrandissant (zoom avant).

C'est ce que j'ai essayé de réaliser en utilisant une image en html. Veuillez noter que je ne peux pas utiliser object-fit car j'utiliserai cette image avec un plugin qui ne prend pas en charge la propriété css object-fit.

Voici la version CSS :

.outer {
  width: 1200px;
  height: 630px;
}

#div {
  background-image: url('https://i.imgur.com/dqywpKM.jpg');
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
<div class="outer">
  <div id="div">
  </div>
</div>

Voici la version HTML de l'image :

.outer {
  width: 1200px;
  height: 630px;
}

#div {
  background-color: white;
  width: 100%;
  height: 100%;
}

#img_prev {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}
<div class="outer">
  <div id="div">
    <img src="https://i.imgur.com/dqywpKM.jpg" id="img_prev" />
  </div>
</div>

La version de l'image HTML semble inclinée, mais j'ai essayé de la faire ressembler un peu à un zoom pour s'adapter au conteneur sans utiliser object-fit. Comment puis je faire ça?

0
Zak 19 mars 2021 à 15:40

2 réponses

Meilleure réponse

La raison est ici le background-size: cover;

Redimensionne l'image aussi grande que possible pour remplir le conteneur, en étirant l'image si nécessaire. Si les proportions de l'image diffèrent de l'élément, il est rogné verticalement ou horizontalement de sorte qu'il ne reste aucun espace vide.

-> il indique au dimensionnement de l'image l'agrandir jusqu'à ce qu'il ait au minimum les axes X ET Y du conteneur Cela signifie que l'image est plus grande que le conteneur sur l'un des axes, car elle a une proportion différente.

Vous voyez cela dans votre version HTML-image, l'image est étirée.
Donnez à votre #div un overflow: hidden; et position: relative;
Vous pouvez maintenant ajouter position: absolute; à votre #img_prev.
À ce stade, l'image est coupée en bas mais n'a toujours pas l'air agrandie comme dans votre version CSS.
Mais il existe un moyen de le faire : ajoutez également

  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;

À votre #img_prev.
Cela centrera l'image à l'intérieur de votre div et coupera les bords qui débordent.

.outer {
  width: 1200px;
  height: 630px;
}

#div {
  background-color: white;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#div2 {
  background-image: url('https://i.imgur.com/dqywpKM.jpg');
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

#img_prev {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<h2>HTML-Version</h2>
<div class="outer">
  <div id="div">
    <img src="https://i.imgur.com/dqywpKM.jpg" id="img_prev" />
  </div>
</div>
<h2>CSS-Version</h2>
<div class="outer">
  <div id="div2">
  </div>
</div>
1
Atomkind 19 mars 2021 à 13:24
enter code here
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="outer">
        <div id="div">
        </div>
    </div>

    <style>

        .outer {
            width: 1200px;
            height: 630px;
        }
          
        #div {
            background-image: url('https://images.unsplash.com/photo-1610128114197-485d933885c5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            width: 100%;
            height: 100%;
        }
    </style>
</body>
</html>
1
Parham Moieni 19 mars 2021 à 18:18