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

【问题标题】：Background image change width and height on different sizes背景图像在不同尺寸上改变宽度和高度
【发布时间】：2018-02-13 18:25:00
【问题描述】：

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

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

用于图像的 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>

【问题讨论】：

没有您的完整示例，但是这个呢？ jsfiddle.net/btd5xh0m
使用 vw 和 vh 单位。例如：100vw=当前窗口大小的宽度，100vh=当前窗口大小的高度。

标签： jquery html css responsive-design

【解决方案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;
}

【讨论】：

这是一个很好的提示，但它不会像我想要的那样工作。现在有些图片没有覆盖整个页面。
我将 min-width 和 min-height 从 50vw 更改为 50%，现在效果更好了。
如果您需要图像全宽和全窗高度。只能使用宽度：100vw 和高度：100vh 并删除最小和最大宽度/高度

【解决方案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; 
}

【讨论】：