web-dev-qa-db-fra.com

Mettre à l'échelle / zoomer un élément DOM et l'espace qu'il occupe à l'aide de l'échelle de transformation CSS3 ()

Au milieu de ma page, j'ai un élément div avec du contenu (autres divs, images, peu importe).

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

Je voudrais mettre à l'échelle cet élément (contenu à l'échelle) et tout ce qui est des enfants. Cela ressemble à un travail pour l'opération de mise à l'échelle de la transformation CSS3. Cependant, le problème est qu'il s'agit d'une transformation sur la visualisation de la hiérarchie de cet élément uniquement, cela ne change pas la quantité d'espace (ou la position) de l'élément sur la page. En d'autres termes, la mise à l'échelle de cet élément plus grand le fera chevaucher avec le texte "avant" et "après".

Existe-t-il un moyen simple/fiable de mettre à l'échelle non seulement la représentation visuelle, mais également la quantité d'espace occupé?

Points supplémentaires pour CSS pur sans Javascript. Encore plus de points pour une solution qui fait la bonne chose avec d'autres fonctions de transformation comme la rotation et l'inclinaison. Il n'est pas nécessaire d'utiliser la transformation CSS3, mais elle doit être prise en charge par tous les navigateurs récents compatibles HTML5.

htmlcssscalecss-transforms
38
kanaka

Le HTML (Merci Rory)

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
  <title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>

  <div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="surrounding-content">
      after
    </div>
  </div>

</body>
</html>

Le CSS (toujours commencé à partir de la base de Rory)

body {
  font-size: 13px;
  background-color: #fff;
}
#wrapper {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 0.07692307692307693em solid #888;
  padding: 1.1538461538461537em;
}
.surrounding-content {
  border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
  border: 0.07692307692307693em solid #bbb;
  width: 10em;
}
#content-to-scale {
  font-size: 1.1em;
}
#content-to-scale img {
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
}

L'explication:

J'utilise la taille de la police et ems pour "mettre à l'échelle" les dimensions des éléments enfants.

Ems sont des unités de dimension qui sont relatives à la taille de police du contexte actuel.

Donc, si je dis que j'ai une taille de police de 13px et une bordure de 1 (la largeur de bordure souhaitée en pixels) divisée par 13 (la taille de police du contexte actuel également en pixels) = 0,07692307692307693em, le navigateur doit afficher un 1px frontière

Pour émuler un remplissage de 15 pixels, j'utilise la même formule, (pixels souhaités)/(taille de police du contexte actuel en pixels) = ems souhaité. 15/13 = 1,1538461538461537em

Pour apprivoiser la mise à l'échelle de l'image, j'utilise un de mes vieux favoris: l'échelle de préservation du rapport naturel, je m'explique:

Les images ont une hauteur et une largeur naturelles et un rapport entre elles. La plupart des navigateurs conserveront ce rapport si la largeur et la hauteur sont définies sur auto. Vous pouvez ensuite contrôler la largeur souhaitée avec min-width et max-width, dans ce cas, en la faisant toujours être mise à l'échelle sur toute la largeur de l'élément parent, même lorsqu'elle sera au-delà de sa largeur naturelle.

(Vous pouvez également utiliser max-width et max-height 100% pour empêcher l'image de sortir des bordures de l'élément parent, mais sans jamais redimensionner au-delà de leurs dimensions naturelles)

Vous pouvez désormais contrôler la mise à l'échelle en modifiant la taille de la police sur # content-to-scale. 1.1em équivaut à peu près à l'échelle (1.1)

Cela présente certains inconvénients: le dimensionnement des polices imbriquées dans ems est appliqué de manière récurrente. Signification si vous avez:

<style type="text/css">
    div{
        font-size: 16px;
    }
    span{
        font-size: 0.5em;
    }
</style>
<div>
    <span>
        <span>
            Text
        </span>
    </span>
</div>

Vous vous retrouverez avec un rendu "Texte" à 4 pixels au lieu des 8 pixels que vous attendez.

10
Lucas Green