爲什麼圖像在小型手機屏幕上未按計劃對齊？

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%; 
}