Question

我正在尝试建立一个图片库，图片在屏幕中央垂直和水平显示;已发布的小提琴在Edge，Internet Explorer和（Java Netbeans 8.02）嵌入式Web浏览器上正常运行，但谷歌浏览器除外。

Chrome中的问题如下：如果图片的分辨率高于屏幕图片的边缘将不可见;我们的想法是在不丢失像素的情况下显示图片。

CSS：

.fullscreenContainer{
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0; right: 0; bottom: 0; left: 0;
background-color:rgba(0,0,0,0.55);
}
.imageGallery-container {
  background-color: white;
  z-index: 10000;
  margin: auto;
  position: relative;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  /* IE 9 */
  -webkit-transform: translateY(-50%);
  /* Safari */
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.imageGallery-container > img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

HTML

<div class="fullscreenContainer">
<div class="imageGallery-container">
  <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg">
</div>
</div>

https://jsfiddle.net/mL72yytk/2/

Answer 1

flexbox有什么问题？

.fullscreenContainer{
  position: fixed;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullscreenContainer img { 
  display: block;
  max-height: 100vh;
  max-width: 100vw;
}

<div class="fullscreenContainer">
  <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg">
</div>

不要忘记prefix。

Chrome无法像其他浏览器一样显示图片

1 个答案: