将img置于体内

Question

我写了一个简单的html代码，将一个img集中在html体内，它可以在不同浏览器的窗口和垂直手机上正常工作，只有当我旋转手机时img没有调整大小。主要的问题是，当我在Mac上打开这个网站时，中心不适用于所有浏览器！ 这是我的代码。

<input type="range" min="20" max="100" />
<input type="range" max="100" />

Answer 1

试试这个：

<style>
html {
  height: 100%;
  position: relative;
}

body {
  background-image: url("img/pattern-small.png");
  background-repeat: repeat-x-y;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.centerimg {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
}
</style>

请注意对转换属性所做的更改，添加的前缀用于浏览器支持，这可能会解决您的问题

Answer 2

您可以使用table / table-cell方法。

父元素（可能是您的案例中的正文）具有display属性table。请务必明确将dimensioninos设置为tables，但默认情况下仅占用内容提供的数量。

从那里，应该设置子元素（在您的情况下是图像）具有以下内容：

display: table-cell; vertical-align: middle;

总计：

.parent {
  display: table;
  width: 100%; // whatever you want
  height: 100%; // whatever you want
}

.child {
  display: table-cell;
  vertical-align:middle;
  max-width: 100% // image is never larger than its parent and always responsive. 
}