css上下按钮实现图片轮播尺寸

CSS上下按钮实现图片轮播尺寸的方法如下：

/* HTML */
<div class="slideshow">
  <img src="image1.jpg" alt="image" height="500px" width="800px">
</div>

<button class="up-button">Up</button>
<button class="down-button">Down</button>

/* CSS */
.slideshow {
  height: 500px;
  width: 800px;
  overflow: hidden;
}

.up-button, .down-button {
  width: 50px;
  height: 50px;
}

.up-button {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.down-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.up-button:hover, .down-button:hover {
  background-color: #ccc;
}

.up-button:active, .down-button:active {
  background-color: #aaa;
}

.up-button:before, .down-button:before {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  transform: rotate(-135deg);
}
.up-button:before {
  margin-top: 20px;
}
.down-button:before {
  margin-bottom: 20px;
} 

首先在HTML中，需要一个包含图片的div，设定高度和宽度，并将overflow设为hidden。然后在上下方分别添加按钮。

在CSS中，需要将按钮设置为定位为绝对位置，并设定其位置，在按钮的:hover和:active伪类中添加颜色变化效果。同时为按钮添加上下箭头样式。

有了这些，我们就可以通过点击上下按钮来轮播图片。