Question

我正在尝试调整图片大小并将其保留在页面中间。我尝试了<center>和align="middle"以及我在这里发现的许多其他事情并没有帮助。这是一个页面示例（我希望它如何，但没有文本，背景等）：

https://gyazo.com/5943303da90127d4e5bf24989812888e

以下是目前的情况：

Answer 1

grep '|5[^|]*$' file

img {
   left: 50%;
   top: 50%;
   max-height: 100%;
   max-width: 100%;
   position: absolute;
   transform: translate(-50%, -50%);
}

Answer 2

.container {
  width: 100%;
  height: 100%;
  display: table;
}

.container .inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

<div class="container">
  <div class="inner">
    <img src="http://i.inf.vg/images/png/3AtgG.png">
  </div>
</div>

您可以使用媒体查询来更改不同尺寸设备上的图像。

codepen：http://codepen.io/pen/

如果图像比浏览器大？如何将图像居中到页面中间并调整大小？

2 个答案: