jQuery+css使用按钮功能更改图片大小模板

以下是一个使用jQuery和CSS的按钮模板，可以根据点击不同的按钮来改变图片的大小：

HTML代码：

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

<div class="button-group">
  <button class="small-button">Small</button>
  <button class="medium-button">Medium</button>
  <button class="large-button">Large</button>
</div>

CSS代码：

.image-container {
  width: 100%;
  text-align: center;
}

.image-container img {
  max-width: 100%;
  height: auto;
}

.button-group {
  text-align: center;
  margin-top: 10px;
}

.small-button,
.medium-button,
.large-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.small-button:hover,
.medium-button:hover,
.large-button:hover {
  background-color: #3e8e41;
}

.active {
  background-color: #555;
  color: white;
}

jQuery代码：

$(document).ready(function() {
  $('.small-button').click(function() {
    $('.image-container img').css('max-width', '300px');
    $(this).addClass('active');
    $('.medium-button, .large-button').removeClass('active');
  });

  $('.medium-button').click(function() {
    $('.image-container img').css('max-width', '500px');
    $(this).addClass('active');
    $('.small-button, .large-button').removeClass('active');
  });

  $('.large-button').click(function() {
    $('.image-container img').css('max-width', '800px');
    $(this).addClass('active');
    $('.small-button, .medium-button').removeClass('active');
  });
});

在这个模板中，我们首先创建了一个包含图片的容器，并在其下方创建了三个按钮，分别用于更改图像大小。 CSS部分设置了图像容器和按钮的样式。 jQuery代码将在按钮被点击时更改图像大小，并且根据当前按钮的状态添加或删除“active”类。

请注意，这只是一个简单的示例，您可能需要根据您的需要进行更改和调整。