javascript - 图像需要根据第一个 div 图像调整一半大小

Question

我在两个 div 标签内有两种不同大小的图像。我需要将第二个 div 图像大小调整为第一个 div 图像的一半。

.first-div img {
  width:500px; //this img size may be random
}
.second-div img {
  width:250px;//need to resize the img half of first-div image
}

<div class="first-div">
<img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" width="" />
</div>

<div class="second-div">
<img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" width="" />
</div>

例如，如果第一个 div 图像大小为 200，第二个 div 图像大小为 100。任何人都可以帮助我实现这一目标。

Answer 1

通过使用Jquery

$('.second-div img').width($('.first-div img').width()/2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-div">
	<img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" width="" />
</div>

<div class="second-div">
	<img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" width="" />
</div>

您可以使用css 变量

:root {
    --main-width: 500px; 
}
img {
    vertical-align: middle;
    border-style: none;
}
.first-div img {
  width:var(--main-width); 
}
.second-div img {
  width:calc(var(--main-width)/2);
}

<div class="first-div">
	<img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" width="" />
</div>

<div class="second-div">
	<img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" width="" />
</div>