Javascript 自适应图像调整

什么是一种很酷的CSS3方法，可以确保图像占据窗口高度，最小宽度为50%和最大宽度为100%取决于图像的大小

因此，如果图像质量良好且大于屏幕/视口的分辨率，它将表现为

背景大小：cover

如果没有，它将占据至少50%的屏幕不动产

谢谢。
PS-如果CSS3做不到，JS方法是很酷的，但也可以作为一种退路

html，
身体{
最小高度：100%！重要；
背景色：#EFEF；
颜色：#5c；
溢出y：隐藏；
}
html{
字体大小：10px；
}
身体{
/*背景：#fff*/
保证金：0；
身高：100%；
}
#布局{
身高：100%；
最大高度：100%；
最小宽度：100%；
位置：绝对位置；
显示器：flex；
flex-flow：行nowrap；
对正内容：左；
对齐项目：居中；
}
#掩护{
背景：#efef；
弹性：0 30雷姆；
最大高度：100%；
宽度：自动；
最小宽度：100%；
最大宽度：100%；
身高：100%
}
.hold img{width:inherit；height:inherit；padding:0；margin:0；}

---

你可以这样做

.the_img{
    width: 100%;
    max-width: 1024px; 
}

对于“最大宽度”，您将添加图像的宽度，使其不会位于该宽度之下

---

您将什么划分为

高质量

？填充整个窗口时，它不会出现像素化。然后，您需要分析图像的原始大小，检查视口的宽度，然后持续更新。