如何将最大高度设置为与宽度相同答案

【问题标题】：How can I set the max-height same as width如何将最大高度设置为与宽度相同
【发布时间】：2022-02-16 03:13:59
【问题描述】：

我目前正在我的博客上工作，我正在尝试将所有图像调整为 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>

提前谢谢你！

【问题讨论】：

标签： html css image height object-fit

【解决方案1】：

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

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

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

【讨论】：

嘿，谢谢您的回答。我基本上想强制图像进入这个正方形比例（现在可以使用）。但如果是风景图片，则不应强制使用此比例，因为文本和图像之间会有空白。我尝试使用 max-height / max padding down 但这对我不起作用。我想找到一个不需要javascript的解决方案。我希望这是有道理的。
所以你基本上想要一个静态宽度：50px;高度：50 像素？但如果是风景则不是？
是的，完全正确。我知道如何通过 js 做到这一点，但我想知道这是否可以纯粹用 css 完成

【解决方案2】：

object-fit: cover;会调整图片大小。

【讨论】：