Bildbreite relativ zum enthaltenden div

Ursprüngliche Frage

Was ist der effizienteste Weg, um die Breite eines Bildes relativ zu seinem enthaltenden div in CSS zu berechnen?

Ich habe das folgende Snippet, das setzt #image1.width auf einen Prozentsatz, der relativ zur Breite des übergeordneten Elements ist. Ich verwende einen Prozentsatz, weil ich den brauche Bild proportional zum übergeordneten Bild zu skalieren, wenn die Größe des Bildschirms geändert wird.

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>

Es funktioniert derzeit wie beabsichtigt, außer dass ich den Breitenprozentsatz für jedes einzelne Bild manuell berechnen muss. dh

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

Was ich wissen möchte, ist, ob es eine id gibt calc() Methode oder ähnliches, die ich implementieren kann, um diesen Prozess zu vereinfachen/rationalisieren?

Ich wollte verwenden width: calc(100% / 700) Dies funktioniert jedoch offensichtlich nicht, wenn sich die Bildschirmgröße ändert.

Ziele

Um es noch einmal zu wiederholen, es ist zwingend erforderlich, dass die #under Bild skaliert mit der Bildschirmgröße und der #image bleibt verhältnismäßig.

Ich möchte, dass die natürlichen Bildverhältnisse zueinander erhalten bleiben (dh ein Bild, das ein Viertel so groß ist wie das andere, bleibt bei allen Browserbreiten so).

Notiz: Das html kann in irgendeiner Weise umkonfiguriert werden, um dies zu erreichen.

Zielbrowser: Chrom, Firefox, Rand.

Prämienüberprüfung posten

Kommentieren Sie die Antwort von @Obsidian Age (Ende des ersten Kopfgelds am 31.03.17):

Leider ist die Antwort von @Obsidian Age nicht korrekt – sie ist nah dran, aber nicht ganz und ich wollte das hier nur klarstellen … Unten ist ein Ausschnitt aus seiner Antwort … Beachten Sie, dass ich denke, dass es eine gute Antwort ist, nur um zu klären, warum es so ist wurde nicht angenommen:

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

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

Einstellung --width: 90vw was passiert wenn body oder div haben eine max-width einstellen? Auch das ist bei der Einrechnung für alle Geräte sehr schwer zu berechnen viewport-scaling.

#image1 { width:calc(var(--width) / 3); } Dies entspricht calc(90vw / 3) welches ist 30vw was 30 % der Bildbreite entsprechen würde. Aber wie berechnen wir die Zahl, durch die wir dividieren? Nun, es ist wieder da, wo wir angefangen haben … width:calc(var(--width) * calc(206/700*100)); Und deshalb habe ich diese Antwort nicht akzeptiert.

Leider hat CSS keinen übergeordneten Selektor. Während Sie ein Element nicht relativ zum übergeordneten Element erstellen können direkt mit CSS, was Sie kann tun mit reinem CSS wird eine Variable gesetzt, die von beiden Elementen verwendet wird:

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

Jetzt können Sie diese Variable sowohl als (feste) Breite des übergeordneten Elements verwenden, und die rechnerische Weite des Kindes:

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

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

Beachten Sie, dass die Variable entweder eine feste Einheit oder relativ zum Ansichtsfenster sein muss. Wenn es prozentual wäre, beides #under und #image1 würden ihre Breite von ihren jeweiligen Eltern stützen. Damit dies responsiv funktioniert, muss es auf dem Darstellungsbereich basieren.

: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>

Ich habe auch ein JSFiddle davon erstellt hierwo Sie sehen können, wie beide Elemente skaliert werden, wenn die Größe des Ansichtsfensters geändert wird.

Hoffe das hilft! 🙂

Mir ist klar, dass die Frage nach einer reinen CSS-Lösung fragt, aber ich habe das großzügig als “kein JavaScript” interpretiert.

In diesem Sinne ist hier eine Lösung mit einem eingebetteten SVG:

<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>

Der beste Ansatz wäre meiner Meinung nach, die Breite zu eliminieren und die Skalierung zu verwenden, um sie an das div anzupassen, aber das Problem ist, dass die Skalierungstransformation keinen Einheitswert akzeptiert, wie z. B. % oder px oder 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 */
}

Das zweitbeste, was ich mir vorstellen kann, ist, die manuelle Prozentberechnung zu eliminieren. Verwenden calc() Funktion, dies für Sie zu tun.

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

Hier muss man für alle noch Breite schreiben, wird aber zumindest von Prozent- oder Verhältnisrechnung verschont.

Notiz:
Wenn jemand bei der ersten Annäherung helfen kann, sind seine Beiträge willkommen.

Eine Sache, die funktionieren könnte, wenn Sie bereit sind, 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>

Sie können diese nach Belieben gruppieren, denken Sie nur daran, dass sich die Zahlen zu 12 addieren müssen (in meinem Beispiel 6+3+3). Mit col-md-12 können Sie einen 100%igen Breiteneffekt erzielen. Außerdem ist das md-Infix nur eine von mehreren Abschneidemöglichkeiten zwischen dem Anordnen von allem auf einer Linie und dem Stapeln von Elementen. Sie können auschecken http://getbootstrap.com/css/#grid für weitere Details sowie ein paar Beispiele.

Inspiriert von der Antwort von Robby Cornelissen ist hier ein Ansatz, der derzeit in den Zielbrowsern funktioniert. Der einzige Nachteil ist, dass die Abmessungen der Bilder im HTML (naja, eigentlich im SVG) explizit angegeben werden müssen.

Hier ist ein Demo.

<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>

Der Ansatz verwendet, wie Robbys Antwort, das SVG image Element. Dies hat derzeit standardmäßig eine Breite und Höhe von null, wenn keine Abmessungen explizit angegeben sind, aber wird sich verändern in SVG 2. Das bedeutet, sobald SVG 2 von Browsern unterstützt wird, könnten wir anstelle der Angabe der Bildabmessungen festlegen width="auto" height="auto" und fertig sein.

Der Wert Auto zum Breite und Höhe auf der ‘Bild’ -Element wird gemäß CSS aus den intrinsischen Abmessungen und dem Seitenverhältnis des referenzierten Bildes berechnet Standard-Größenalgorithmus.
_{— SVG 2 Editor’s Draft, § 7.8. Größeneigenschaften: die Wirkung der Eigenschaften „Breite“ und „Höhe“. Abgerufen am 18.12.2017.}