jquery - 使用 jquery 函数调整图像大小

Question

我需要调整三个图像的宽度和高度。我想用 jQuery 来做。

我应用了一些 CSS 来做到这一点，但它失败了，因为 col-md-6 类中的图像向右移动了。我希望此图像固定而不是向右移动。

这是我的代码:

#img1:hover {
    width: 200px;
    height: 200px;
}

#img2:hover {
    width: 200px;
    height: 200px;
}

#img3:hover {
    width: 200px;
    height: 200px;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

<div class="row">
    <div class="col-md-6" id="mision">
        <img src="imagenes/MISION.png" id="img1" class="resize">
    </div>
    <div class="col-md-6" id="vision">
        <img src="imagenes/VISION.png" id="img2" class="resize">
    </div>
    <div class="col-md-6 col-centered" id="servicios">
        <img src="imagenes/SERVICIOS.png" id="img3" class="resize">
    </div>
</div

Answer 1

之前没有使用过 bootstrap，但是快速 googleling 会建议

.table-img {
  width: 100px;
}

.table-img:hover {
  width: 200px;
}

和

<div class="row">
  <div class="col-md-6 text-center" id="mision">
    <img src="imagenes/MISION.png" class="resize">
  </div>
  <div class="col-md-6 text-center" id="vision">
    <img src="imagenes/VISION.png" class="resize">
  </div>
  <div class="col-md-6 text-center col-centered" id="servicios">
    <img src="imagenes/SERVICIOS.png" class="resize">
  </div>
</div>

text-center 用于居中图像，调整后的 css 应该适用于悬停和增加图像的大小。

如果没有正确理解您的问题，请告诉我。