Css 自动垂直对齐任何自动调整大小的图像

我找不到一个不在固定图像大小上的答案，所以我要问它

我有一个有图片的div，图片可以是任何大小。我需要它来自动缩放和自动对齐。我可以很好地扩展它，但是垂直对齐它有点困难。我需要它是中心垂直对齐

HTML+CSS

<div id="myDiv">
 <img src="./img/example.png"></img>
</div>


#myDiv {
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0%;
 left: 0%;
 text-align: center;
}

#myDiv img {
 height: auto;
 width: auto;
 max-height: 70%;
 max-width: 70%
}

#myDiv{
位置：绝对位置；
身高：100%；
宽度：100%；
最高：0%；
左：0%；
文本对齐：居中；
}
#myDiv img{
高度：自动；
宽度：自动；
最大高度：70%；
最大宽度：70%
}

此示例强制框内图像的水平和垂直对齐；在此特定情况下，限制为130x130px。在css中的两个单独位置更改定义为130px的宽度和高度，以更改受约束的大小

[编辑：添加了显示所需最低设置的简化示例]

简化示例：

html:

完整示例：

显示更复杂示例的原始代码笔：

以下是html：

<ul class="pics">
  <li>
    <div class="pic">
      <img src="/path/to/pic1.jpg"/>
    </div>
  </li>
  <li>
    <div class="pic">
      <img src="/path/to/pic2.jpg"/>
    </div>
  </li>
</ul>

---

要将元素居中对齐到中心，请指定一个宽度，然后将左右边距设置为“自动”。

值得注意的是，我已尝试将“线高度”添加到父元素中，并设置“垂直对齐：中间；”但是，如果线条高度是一个百分比，它就不起作用了。我不知道如何对你所做的进行逆向工程，以满足我的需要。我会试试的，谢谢，我应该简化这个例子：。重要的部分是将img标记放置在父容器中。除了显示居中生效的可选轮廓外，此代码笔中现在显示的css是最低要求。不确定“自动调整大小”是什么意思。试一试——这将采用任何图像大小，并将其限制为最大宽度和高度，同时保留纵横比。只是不要在img标签或css中设置特定的宽度或高度-让max width和max height为您设置。BOOM！成功了！！！非常感谢。现在想弄清楚原因。图：在那之前？以前没有用过那种方法。谢谢，我用你的代码笔来表示我所说的自动大小。图片会缩小并停留在屏幕调整的中间位置：你的答案被自动标记为低质量。请尝试添加更多细节（或工作代码示例）以改进它。

.pic {
    display: inline-block;
    width: 130px;
    height: 130px;
    outline: solid 1px #cccce3;
    font-size: 0;
    text-align: center;
}

.pic:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.pic img {
    max-width: 130px;
    max-height: 130px;
    display: inline-block;
    vertical-align: middle;
}

<ul class="pics">
  <li>
    <div class="pic">
      <img src="/path/to/pic1.jpg"/>
    </div>
  </li>
  <li>
    <div class="pic">
      <img src="/path/to/pic2.jpg"/>
    </div>
  </li>
</ul>

ul.pics {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

ul.pics li {
    display: inline-block;
    width: 130px;
    margin: 4px;
    padding: 6px;
    background-color: #e6e6ec;
    outline: solid 1px #cccce3;
}

ul.pics li .pic {
    height: 130px;
    font-size: 0;
    text-align: center;
}

ul.pics li .pic:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

ul.pics li img {
    max-width: 130px;
    max-height: 130px;
    display: inline-block;
    vertical-align: middle;
}