使用 jquery 函数调整图像大小答案

【问题标题】：resize image with jquery function使用 jquery 函数调整图像大小
【发布时间】：2017-09-15 18:41:25
【问题描述】：

我需要调整三个图像的宽度和高度。我想用 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

【问题讨论】：

真的不清楚你想要什么。你甚至没有为你的图片定义一个大小，只是为它们的悬停状态，但你没有写任何关于悬停的内容......

标签： jquery html image css

【解决方案1】：

以前没有使用过引导程序，但快速谷歌搜索建议

.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 应该适用于悬停和增加图像的大小。

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

【讨论】：