为什么图像在小型手机屏幕上未按计划对齐？

Question

body{ 
 
    overflow-x:hidden; 
 
    overflow-y:hidden; 
 
    }

<a href="#"> <img src="http://placehold.it/1000x800?text=1"></a>

但是我想要的图像的中心是在移动设备上可见，如下所示：

这是不可能改变图像尺寸和编码格式在我的应用程序。

Answer 1

在这种特定情况下，你可以使用下面的CSS居中图像（即链接）。但你会有比这更多的元素，我想...

注意：这种方式图像也将居中，如果它小于屏幕。

body{ 
 
    overflow-x:hidden; 
 
    overflow-y:hidden; 
 
    } 
 
a { 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    } 
 

<a href="#"> <img src="http://placehold.it/1000x800?text=1"></a>

Answer 2

将max-width: 100%;添加到图像，它将缩小到较小的视口。

body { 
 
    overflow-x:hidden; 
 
    overflow-y:hidden; 
 
} 
 
img { 
 
    max-width: 100%; 
 
}

<a href="#"> <img src="http://placehold.it/1000x800?text=1"></a>

Answer 3

如果你的整个文件只包含一个图像，而你希望它被包含到窗口，你可以做这样的：

https://jsfiddle.net/5yvtz7nt/

基本上做

html 
{ 
    height: 100%; 
} 
body 
{ 
    margin: 0; /* browser have a default margin on body sometimes */ 
    height: 100%; 
} 
a 
{ 
    display: block; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 
img 
{ 
    max-width: 100%; 
    max-height: 100%; 
}