如果图像's比浏览器大

How can I center an image to the middle of the page and resize it if it's bigger than the browser?

本文关键字：浏览器 图像 如果      更新时间：2023-09-26

我正在尝试调整图像的大小，并将其保持在页面的中间。我已经尝试过<center>和align="middle"以及我在这里发现的许多其他东西，但都没有帮助。这是一个页面的例子（我希望它是什么样子，但没有文本，背景等）：

https://gyazo.com/5943303da90127d4e5bf24989812888e

目前情况如下：

  • 小图像：http://i.inf.vg/qkYCd
  • 中等图像：http://i.inf.vg/3AtgG
  • 大图像：http://i.inf.vg/E6b0r

img {
   left: 50%;
   top: 50%;
   max-height: 100%;
   max-width: 100%;
   position: absolute;
   transform: translate(-50%, -50%);
}
<img src="//i.imgur.com/7xYQq8P.jpg" />

.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>

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

代码笔：http://codepen.io/pen/

相关文章：