用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，但是快速谷歌建议

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

文本中心用于居中图像，调整后的CSS应该用于盘旋和增加图像的大小。

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