Chrome浏览器不显示图像相同的其他浏览器

我试图有一个图片库，其中图片显示在屏幕的中心，垂直和水平;发布的小提琴在Google Chrome浏览器上的Edge，Internet Explorer和（Java Netbeans 8.02）嵌入式Web浏览器上工作正常。Chrome浏览器不显示图像相同的其他浏览器

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/

来源

2017-08-06 b0s0r0gu

请参阅https://stackoverflow.com/questions/14554908/imgs-max-height-not-respecting-parents-dimensions。你需要支持哪些浏览器？ – Ryan

我没有看到Firefox和Chrome之间的任何区别。我永远不会使用Edge或IE作为事情应该如何工作的参考。编辑：现在我在IE中也没有看到任何区别。 – Rob

我不知道我明白你想要什么。 '如果图片的分辨率高于屏幕图片的边缘将不可见;这个想法是让图片显示而不会丢失像素 - 所以，您想要在比可以包含它的更小的空间中显示图片，但是您不想失去一个像素的信息？这是不可能的。你的意思是你想缩小图像以适应窗口？根据其性质确实会损失像素。 –

这有什么错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。

来源

2017-08-06 23:06:26

Chrome浏览器不显示图像相同的其他浏览器

回答

相关问题