Question

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

我应用了一些CSS来做到这一点，但它失败了，因为类col-md-6内的图像向右移动。我想要修复此图像而不是向右移动。

这是我的代码：

＆＃13;

#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;
}

＆＃13;

<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

＆＃13;

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>

文本中心用于居中图像，调整好的css应该用于悬停和增加图像的大小。

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

使用jquery函数调整图像大小

1 个答案: