img largeur par rapport à div contenant

Question

Question D'Origine

Quel est le moyen le plus efficace pour calculer la largeur d'une image par rapport à la div contenant en css?

J'ai le code suivant qui définit #image1.width à un pourcentage par rapport à la largeur de son parent. Je suis à l'aide d'un pourcentage parce que j'ai besoin de l' image à l'échelle proportionnellement au parent lorsque l'écran est redimensionné.

div {
  position: relative;
  display: block;
  width: 100%;
}

#image1 {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 29.43%;
  height: auto;
}

#under {
  width: 100%;
}

<div>
  <img id="image1" src="http://placehold.it/206x115">
  <img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>

Il travaille actuellement comme prévu, sauf que j'ai calculer manuellement le pourcentage de la largeur de chaque image. c'est à dire

#image1 dimensions == 206x115
#under dimensions == 700x300
new #image1.width % == #image1.width / #under.width == 206/700 == ~29.43%

Ce que je veux savoir c'est si il y a un id calc() méthode ou similaire, je peut mettre en œuvre pour faciliter, simplifier ce processus?

J'allais utiliser width: calc(100% / 700) cependant de toute évidence, cela ne fonctionnera pas lorsque la taille de l'écran change.

---

Objectifs

Pour ré-itérer, il est impératif que l' #under de l'image s'adapte à la taille de l'écran et l' #image reste proportionnée.

Je veux que l'image naturelle ratios conservés l'un à l'autre (c'est à dire une image qui est un quart de la taille de l'autre restera comme tel navigateur de largeur).

Remarque: L' html peut être reconfiguré en aucune façon à atteindre cet objectif.

Cible les navigateurs: Chrome, Firefox, Edge.

---

Poste Prime D'Examen

Commentaire sur @Obsidienne Âge de réponse (fin de la première prime 31.03.17):

Malheureusement @Obsidienne Âge de réponse n'est pas correcte - c'est proche mais pas tout à fait et je voulais juste préciser ici... ci-Dessous est un extrait de sa réponse... à Noter que je pense que c'est une bonne réponse, juste clarifier la raison pour laquelle il n'a pas été acceptée:

:root {
  --width: 90vw; // Must be viewport-driven
}

#image1 {
  width: calc(var(--width) / 3); // The 3 can be replaced with any float
}

Paramètre --width: 90vw ce qui se passe si body ou div ont un max-width ensemble? C'est aussi très difficile à calculer pour tous les périphériques lorsque l'affacturage dans viewport-scaling.

#image1 { width:calc(var(--width) / 3); } , Ce qui équivaut à calc(90vw / 3) qui 30vw ce qui équivaut à 30% de la largeur des images. Mais comment pouvons-nous le nombre de diviser par? Eh bien, il est de retour là où nous avons commencé... width:calc(var(--width) * calc(206/700*100)); , Et c'est pourquoi je n'ai pas accepté cette réponse.

Answer 1

Malheureusement, le CSS n'a pas de parent sélecteur. Si vous ne pouvez pas faire un élément par rapport à la mère directement avec les CSS, ce que vous pouvez faire avec de la pure CSS est de définir une variable que les deux éléments de rendre l'utilisation de:

:root {
--width: 90vw; // Must be viewport-driven
}

Maintenant, vous pouvez utiliser cette variable à la fois (le fixe) largeur de l'élément parent, et le calcul piloté par la largeur de l'enfant:

#under {
  width: var(--width);
}

#image1 {
  width: calc(var(--width) / 3); // The 3 can be replaced with any float
}

Notez que la variable doit être une unité fixe, ou par rapport à la fenêtre d'affichage. Si c'étaient basés sur un pourcentage, les deux #under et #image1 serait la base de leur largeur hors de leurs parents respectifs. Pour ce travail de manière responsable, il doit être basé sur la fenêtre d'affichage.

:root {
--width: 90vw;
}

div {
  position: relative;
  display: block;
  width: 100%;
}

#image1 {
  position: absolute;
  left: 10%;
  top: 10%;
  width: calc(var(--width) / 3);
  height: auto;
}

#image2 {
  position: absolute;
  left: 25%;
  top: 10%;
  width: 10%;
  height: auto;
}

#under {
  width: var(--width);
}

<div>
  <img id="image1" src="http://placehold.it/206x115">
  <img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>

J'ai également créé un JSFiddle de cela ici, où vous pouvez voir les deux éléments d'échelle lorsque la fenêtre est redimensionnée.

Espérons que cette aide! :)

Answer 2

Je me rends compte que la question demande une solution CSS pure, mais je l'ai interprétée de manière libérale comme signifiant "pas de JavaScript".

Dans cette optique, voici une solution utilisant un SVG intégré:

 <svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" viewBox="0 0 700 300">
     
  <image x="0" y="0"
      xlink:href="http://placehold.it/700x300/ff00f0/ffffff"/>
  <image x="10%" y="10%"
      xlink:href="http://placehold.it/206x115"/>
</svg> 

Answer 3

La meilleure approche, je pense, serait d'éliminer la largeur et de l'utilisation de l'échelle pour s'adapter à la div, mais le problème est la transformation d'échelle n'accepte pas la valeur de l'unité, telles que % ou px ou vw/vh!

.common_img_class{
    transform: scale(calc(100vw/700)); /* this won't work! */
    /* Idea here is to let image take is original width & then scale with respact to base image scaling. Base image scaling is detenined by *window_width/base_image _width*, here base image width is 700 as per you example */
}

Donc deuxième du mieux que je peux penser est d'éliminer le manuel de calcul de pourcentage. Utiliser calc() fonction pour le faire pour vous.

#firsrt_img{
    width: calc((206/700) * 100%);
}
#second_img{
    width: calc((306/700) * 100%);
}

Ici, vous devez écrire la largeur de toutes mais au moins épargné par le pourcentage ou le calcul de ce ratio.

Note:
Si quelqu'un peut aider avec la première approche, leurs contributions sont les bienvenues.

Answer 4

Une chose qui pourrait fonctionner, si vous êtes prêt à utiliser bootstrap (https://getbootstrap.com/examples/grid/):

<!-- parent -->
<div class="row">
  <div class="col-md-6">
    <img src="">
    <!-- this is 50% of the screen for min 992px, a full line otherwise -->
  </div>
  <div class="col-md-3">
    <img src="">
    <!-- this is 25% of the screen for min 992px, a full line otherwise-->
  </div>

  <div class=col-md-3>
    <img src="">
    <!-- this is 25% of the screen for min 992px, a full line otherwise -->
  </div>
</div>

Vous pouvez regrouper ces que vous voulez/besoin, rappelez-vous juste que les chiffres ont à ajouter à 12 (dans mon exemple, 6+3+3). Vous pouvez obtenir 100% de la largeur de l'effet à l'aide de col-md-12. Aussi, le rapport de infix est juste un de plusieurs options de coupure entre le fait de tout mettre sur la même ligne et l'empilage des éléments. Vous pouvez consulter http://getbootstrap.com/css/#grid pour plus de détails, ainsi que quelques exemples.

Answer 5

Inspiré par la réponse de Robbie Cornelissen, ici est une approche qui fonctionne dans les différents navigateurs actuellement. Son seul inconvénient est que les dimensions des images doivent être spécifiées dans le code HTML (ainsi, le SVG vraiment) explicitement.

Voici une démo.

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" viewBox="0 0 700 300">
     
  <image x="0" y="0" width="700" height="300"
      xlink:href="http://placehold.it/700x300/ff00f0/ffffff"/>
  <image x="10%" y="10%" width="206" height="115"
      xlink:href="http://placehold.it/206x115"/>
</svg>

---

L'approche, comme Robby réponse, utilise le SVG image élément. Que actuellement défaut d'avoir zéro largeur et la hauteur en l'absence de dimensions sont spécifiées explicitement, mais va changer en SVG 2. Cela signifie que dès que le SVG 2 est pris en charge par les navigateurs, au lieu de spécifier les dimensions de l'image, nous pourrions width="auto" height="auto" , et doit être fait.

La valeur auto pour la largeur et de la hauteur sur l' image' élément est calculé à partir de l'image référencés intrinsèque dimensions et les proportions, en fonction de la CSS par défaut de dimensionnement de l'algorithme.
_{— SVG 2 de l'Éditeur de Projet, § 7.8. Dimensionnement propriétés: l'effet de la "largeur" et "hauteur " propriétés". Accessible 2017-12-18.}