背景图像在不同尺寸上改变宽度和高度

Question

我有一个图片滑块，它在我的页面中运行背景。我的问题是图像在较小的屏幕上放大了很多。也许有一种方法可以改变图像的宽度或高度，使其看起来更好，图像也不会完全放大。因为我对响应式设计不是很专业，尤其是响应式图像，也许有人可以给我很好的建议。

这就是我的项目的样子。屏幕是从高清显示器拍摄的，但在我的笔记本电脑上，它的放大方式很多，有些图像很难理解。

CSS用于图像的内容：

.sequence .slide-image > img {
  max-width: inherit;
  display: block;
  /*height:auto;*/
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

HTML部分：

<div class="slide-image scale">
  <img src="$KBImage" alt="Welcome to the Loyale"/>
</div>

Answer 1

可以帮助使用vw和vh单位大小： 100 vw =当前总窗口宽度大小。 100 vh =当前总窗口高度大小。

.sequence .slide-image > img {
  max-width: 100vw;
  max-height: 100vh;
  display: block;
  /*height:auto;*/
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50vw;
  min-height: 50vh;
}

Answer 2

尝试此代码可能会对您有所帮助

.sequence .slide-image > img {
  max-width: auto!important;
  display: block;
  /*height:auto;*/
  position: fixed; 
  background-repeat: !important;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
}