他の画像の画像の高さを設定する

相対的な高さを画像に設定することには多くの質問がありますが、それは私には役に立ちません。ここで私が持っているものです。他の画像の画像の高さを設定する

今

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

、私が欲しいのは、画像Open_Source.pngの高さは、まさにそれが見える今までに何Linux_Stable.pngに等しく設定することです。出来ますか？どうすれば期待通りに動作させることができますか？それらのそれぞれに他の内容がありますdivもあります。

出典

2017-10-01 Sagar Devkota

あなたはもっとすることができ ' – mplungjan

'のようなものを意味します正確ですか？あなたのイメージの固定された高さを指定することはできますが、私たちに目的と使用方法を教えてくれることは間違いありません。 –

することができます単純イメージの最大高さ（または固定高さ）適用されます。私たちは、コンテナを使用している場合、画像は同じ高さを持つことができますおそらく

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

出典

2017-10-01 12:00:10

しかし、最初のイメージは高さになります。 – mplungjan

最初の画像の高さの値 –

を最も高い画像として - 私はそれをコード化する方法がわかりません。

はここで二つのバージョン

ある Temani Afifが掲載され

最初のセットの高さは第2のセットは、達成するためには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"

出典

2017-10-01 12:04:31 mplungjan

使用して最初の画像によって決定され、CSSによって決定されますあなたが望むものは、CSSを使ってクラスを定義し、そのクラスのすべての要素に固定サイズを設定することができますそのような..

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

...またはあなたが好きな自分のクラスやによって画像を取得し、そのように、関連する画像の幅/高さ属性を変更するはJavaScriptを使用することができます。

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

どちらの方法でも画像が同じサイズであることが保証されます。

出典

2017-10-01 12:18:30 oRole

これはJavascriptを使用して実現できます。ただ、各画像にIDを与え、その後、例えばDOM .clientHeightを使用して最初の1の高さを取得：

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

出典

2017-10-01 12:31:33

高さにスクロールバーと罫線を含める場合は、clientHeightではなくoffsetHeightを使用することもできます –

他の画像の画像の高さを設定する

答えて

関連する問題