为什么图像在小型移动屏幕上没有按照计划对齐？

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我希望图片的中心在移动设备上可见，如下所示：

无法在我的应用程序中更改图像尺寸和代码格式。

Answer 1

将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 2

在这种特殊情况下，您可以使用下面的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 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%;
}