Question

当我有小图像（例如100x100）并且它的父图像较大（例如200x200）时，我希望图像在父图像中垂直和水平居中。

但是当图像比父图像（200x200）更宽（例如300x100）时，我希望它放在父图像的左侧，并且有一个水平滚动条可以滚动并查看整个图像。

当图像比父母高时（例如100x300）我希望它放在父母的顶部并且有垂直滚动条以便能够看到整个图像。

我知道如何在Javascript中执行此操作，但我需要一个CSS解决方案。

Answer 1

您可能只想始终将图像居中，并且它会根据您自己的喜好进行调整。

.box {
  width:300px;
  height:300px;
  border:1px red solid;
  overflow:scroll;
  display:flex;
  justify-content:center;
  align-items:center;
}

这里最重要的部分是：

display:flex;
justify-content:center;
align-items:center;

这三条线就是这样的，所以“＃box;将垂直和水平居中。

然后您可以添加overflow:scroll;以允许您想要的滚动。

工作示例：

＆＃13;

.box {
  width:300px;
  height:300px;
  border:1px red solid;
  overflow:scroll;
  display:flex;
  justify-content:center;
  align-items:center;
}

＆＃13;

<div class="box">
  <img src="https://unsplash.it/200/200" alt="">
</div>

<div class="box">
  <img src="https://unsplash.it/200/500" alt=""> 
</div>

<div class="box">
  <img src="https://unsplash.it/500/200" alt="">
</div>

＆＃13;

Answer 2

首先，使用Flexbox及其justify-content / align-items和center应该这样做，但事实并非如此，因为它会在顶部/底部产生溢出弹性项目更高。

Src：https://www.w3.org/TR/css-flexbox-1/#valdef-align-items-center

一种更好的方法，可以跨浏览器正常工作，可以是自动边距，也可以是img的包装。

包装器的原因很简单，当涉及img作为弹性项目时，跨浏览器的行为不一致。

Updated codepen

Stack snippet

.box {
  width:300px;
  height:300px;
  border:1px red solid;
  overflow: auto;                 /*  changed so it only show scroll when needed  */
  display: flex;
  align-items: flex-start;        /*  IE need this  */
}
.box > div {
  margin: auto;
}
.box > div > img {
  display: block;
}

<div class="box">
  <div>
    <img src="https://unsplash.it/200/200" alt="">
  </div>
</div>

<div class="box">
  <div>
    <img src="https://unsplash.it/200/800" alt="">
  </div>
</div>

<div class="box">
  <div>
    <img src="https://unsplash.it/800/200" alt="">
  </div>
</div>

如果图像比父母小，如何将图像居中，当它放大时会放在左上角？

2 个答案: