自适应图像调整

Question

根据图像的大小，什么是一个很酷的CSS3方法，以确保图像占据窗口高度dict和min-width:50%？

因此，如果图像质量好并且大于屏幕/视口的分辨率，它将表现为max-width:100%;，如果不是，它将占据屏幕空间的至少50％。

感谢。
PS - 如果CSS3不能做，JS方法很酷但是否则可以作为后备首选

background-size:cover;

  html,
body {
  min-height: 100% !important;
  background-color: #efefef;
  color: #5c5c5c;
  overflow-y: hidden;
}
html {
  font-size: 10px;
}

body {
  /*background: #fff;*/
  margin: 0;
  height: 100%;
}

#layout {
  height: 100%;
  max-height: 100%;
  min-width: 100%;
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;
}

#cover {
	background:  #EFEFEF;
  flex: 0 0 30rem;
  max-height: 100%;
  width: auto;
  min-width: 100%;
  max-width: 100%;
  height:100%
}

.hold-img{width: inherit;height: inherit;padding: 0;margin: 0;}