Question

关于设置图像的相对高度有很多问题，但非可以帮助我。我在这里是：

<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也有其他内容。

Answer 1

您可以使用Javascript实现此目的。只需为每个图像指定一个id，然后使用 DOM .clientHeight获取第一个图像的高度，例如：

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

Answer 2

您可以简单地为图像应用 max-height （或固定高度）：

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

Answer 3

也许如果我们使用容器，图像可以与最高的图像具有相同的高度 - 我不知道如何编码。

以下是两个版本

第一集的高度由CSS决定为Temani Afif发布，第二组由使用JavaScript的第一个图像决定

＆＃13;

.img1 {
max-height: 100px;
}

＆＃13;

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

＆＃13;

Answer 4

要实现您想要的功能，您可以使用 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 来获取他们的类或任何你喜欢的图像，然后修改相关图像的width / height属性，如下所示：

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

两种方法都可确保图像大小相同。

设置图像的高度为其他图像

4 个答案: