自适应图像调整

时间:2015-05-05 10:34:50

标签: javascript jquery css image css3

根据图像的大小,什么是一个很酷的CSS3方法,以确保图像占据窗口高度dictmin-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;}

0 个答案:

没有答案