Höhe der Bilder wie von anderen Bild setzen

Es gibt viele Fragen über die Einstellung der relativen Höhe zum Bild, aber nicht könnte mir helfen. Hier ist, was ich habe, ist:Höhe der Bilder wie von anderen Bild setzen

<div> 
    <div> 
    <img src='/uploads/2017/Linux_Stable.png' style='height: auto; max-width: 90%;' /> 
    </div> 
    <div> 
    <img src='/uploads/2017/Open_Source.png'/> 
    </div> 
</div>

Nun, was ich will, ist die Höhe des Bildes einstellen Open_Source.png genau Linux_Stable.png gleich, was immer es aussieht. Ist es möglich? Wie kann ich es wie erwartet funktionieren lassen? Es gibt auch andere Inhalte auf diesen div.

Quelle

2017-10-01 Sagar Devkota

Sie meinen, so etwas wie '' – mplungjan

können Sie mehr präzise? es ist für mich klar, dass Sie eine feste Höhe für Ihre Bilder angeben können ... aber sagen Sie uns den Zweck und wie Sie diese verwenden werden –

können Sie einfach anwenden eine max-height für die Bilder (oder eine feste Höhe):

img { 
 
max-height: 100px; 
 
}

<img src='https://lorempixel.com/200/100/' style='height: auto; max-width: 90%;' id="image1" /> 
 
<img src='https://lorempixel.com/200/200/' id="image2"/>

Quelle

2017-10-01 12:00:10

Aber das wird das erste Bild auf die Höhe sein, die es – mplungjan

sein soll, die er angeben kann Wert der Höhe des ersten Bildes, –

Vielleicht, wenn wir einen Behälter verwenden, können die Bilder gleiche Höhe haben als das höchste Bild - ich bin mir nicht sicher, wie ich das programmieren soll.

Hier sind zwei Versionen

Erste Set Höhe wird durch CSS entschieden als Temani Afif geschrieben, zweiten Satz wird durch das erste Bild entschieden, mit Hilfe von JavaScript

.img1 { 
 
max-height: 100px; 
 
}

<img class="img1" src='https://lorempixel.com/200/100/' style='height: auto; max-width: 90%;' id="image1" /> 
 
<img class="img1" src='https://lorempixel.com/200/200/' id="image2"/> 
 
<hr/> 
 
<img src='https://lorempixel.com/200/200/' style='height: auto; max-width: 90%;' id="image1" /><img 
 
    src='https://lorempixel.com/200/300/' id="image2" onload="this.height=this.previousSibling.height"

Quelle

2017-10-01 12:04:31 mplungjan

zu erreichen Was Sie wollen, können Sie entweder CSS verwenden, um eine Klasse zu definieren und eine feste Größe für alle Elemente dieser Klasse zu setzen so ..

/* index.css */ 
.myImg { 
    position: relative; 
    float: left; 
    width: 200px; 
    height: 200px; 
} 

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
    <head> 
     <link rel='stylesheet' href='index.css'> 
    </head> 
    <body> 
     <img class='myImg' src='‪A.png'> 
     <img class='myImg' src='‪B.png'> 
    </body> 
</html>

.. oder Sie JavaScript erhalten die Bilder durch ihre Klasse verwenden könnte oder was auch immer Sie mögen und dann die Breite/Höhe Attribut des betreffenden Bildes ändern, wie folgt aus:

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <img class='myImg' src='‪A.png' style='width:100px; height:100px'> 
     <img class='myImg' src='B.png'> 
     <script type='text/javascript' href='index.js'></script> 
    </body> 
</html> 

// index.js 
var images = document.getElementsByClassName('myImg'); 

images[1].style.height = images[0].style.height; 
images[1].style.width = images[0].style.width;

Beide Methoden stellen sicher, dass die Bilder die gleiche Größe haben.

Quelle

2017-10-01 12:18:30 oRole

Sie können dies mit Javascript erreichen. Gib jedem Bild eine ID, und dann die Höhe des ersten erhalten mit DOM .clientHeight zum Beispiel:

var image1 = document.getElementById("img1"); 
 
var image2 = document.getElementById("img2"); 
 
image2.style.height = image1.clientHeight;

<img id="img1" src='/uploads/2017/Linux_Stable.png' style='height: auto; max-width: 90%;' /> 
 
<img id="img2" src='/uploads/2017/Open_Source.png' />

Quelle

2017-10-01 12:31:33

Sie können auch offsetHeight anstelle von clientHeight verwenden, wenn Sie die Bildlaufleiste und Rahmen in die Höhe einbeziehen möchten –

Höhe der Bilder wie von anderen Bild setzen

Antwort

Verwandte Themen