html - 如何将最大高度设置为与宽度相同

Question

我目前正在我的博客上工作，我正在尝试将所有图像调整为 1:1 的比例，这对于高度大于宽度的图像非常有用。另一方面，它也适用于宽度较大的图像。但我遇到的主要问题是宽度较大的图像不需要符合 1:1 的比例，因为这样可以更好地对齐下面的描述。

我怎样才能解决这个问题？（请在下面找到我的代码）：

CSS：

.img-container {
    background: transparent;
    position: relative;
    width: 100%;
}

.img-container:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.img-container img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
}

HTML：

<div class="img-container">
<img src="xxx"/>
</div>

先感谢您！

Answer 1

我不确定你在问什么。此外，这些图片都没有 1:1 的纵横比，这意味着它们是完全正方形的。

如果您想根据图像是横向还是纵向应用不同的 css，那么我认为您将需要实现一些 javascript 来检测测量值，然后应用您希望应用的 css 类。

否则，我最初的想法是，你为什么不只应用一个最大宽度？纵向图像将占用最大的水平空间，而横向图像将占用最大空间，而不会扭曲当前的纵横比。

Answer 2

object-fit: cover;将调整图像的大小。