Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

使用Jquery

＆＃13;

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

＆＃13;

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

＆＃13;

您可以使用css variables

来实现此目的

＆＃13;

: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);
}

＆＃13;

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

＆＃13;

Answer 2

你可以通过这样使用jQuery来实现这个目的：

 var img = new Image();

 img.onload = function() {
      alert(this.width + 'x' + this.height);
      var width = this.width;
      $('.second-div img').css('width',width/2);
 }
 var url = $('.first-div').find('img').attr("src"); // get dynamically url image
 img.src = url;

  or

 img.src = 'https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg';//image_path_of_first_div_image;

通过传递图像URL，您可以动态获得图像的宽度和高度。

Answer 3

使用jQuery，你可以做到

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

图像需要根据第一个div图像调整一半

3 个答案: