javascript - 如何给图像一个最大高度但保持纵横比？

Question

图像占文档宽度的 100%。我希望图像的最大高度为屏幕高度的 2/3，但要保持纵横比，并使图像居中。

Here是一个起点的 fiddle 。

编辑:我已经更新了 fiddle 以演示我找到的一个 CSS 解决方案(在下面的答案中显示)，但最好有一个具有更多浏览器支持的解决方案。

HTML:

<header>
    <div class="header-content"></div>
</header>
<div class="image-wrapper">
    <img class="image" src="http://designyoutrust.com/wp-content/uploads/2013/06/376.jpg" alt="pic" />
</div>
<div class="other-content">
</div>

CSS:

header {
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
}
.header-content {
    height: 5em;
}
.image {
    width: 100%;
}
.other-content {
    height: 20em;
    width: 100%;
    background-color: black;
}

我刚刚开始学习网络开发，所以我对这一切都很陌生。我已经尝试创建一个函数来说明 if image height >= 67vh then html width = image width 但我无法让它工作。

Answer 1

尽管我更希望有一个对浏览器支持更好的解决方案，但此解决方案有效。

.image-wrapper, .image {
    max-height: 67vh;
}

body {
    max-width: 119.0525vh;
    margin: auto;
}

最大宽度是根据原始图像的纵横比相对于视口(viewport)高度计算的。

计算是(图片宽度/图片高度)*视口(viewport)高度的百分比=最大宽度

在这种情况下 (1354px/762px) * 67vh = 119.0525vh