如何给图像一个最大高度但保留纵横比？答案

【问题标题】：How to give image a max-height but retain aspect ratio?如何给图像一个最大高度但保留纵横比？
【发布时间】：2015-07-05 09:41:00
【问题描述】：

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

Here 是一个 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;
}

我刚刚开始学习网络开发，所以我对这一切都很陌生。我试过创建一个函数，如果图像高度 >= 67vh 然后 html 宽度 = 图像宽度，但我无法让它工作。

非常感谢任何帮助。

【问题讨论】：

stackoverflow.com/questions/12991351/…

标签： javascript jquery html css aspect-ratio

【解决方案1】：

如果您的应用程序打算在纵横比和分辨率方面使用任何图像之王。然后你可以使用以下概念：

HTML：

     <img src="@Model.ThumbnailUrl" id="imageThumbnail">

Javascript：

 <script>
    $(document).ready(function () {
        $('#imageThumbnail').each(function () {

            var maxWidth = 601; // Max width for the image
            var maxHeight = 257.14;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height

            // If Height width are same
            if (height === width) {
                $(this).css("height", maxHeight);
                $(this).css("width", maxHeight);
            }

            // Check if the current width is larger than the max
            if (width > maxWidth) {
                ratio = maxWidth / width;   // get ratio for scaling image
                $(this).css("width", maxWidth); // Set new width
                $(this).css("height", height * ratio);  // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
                width = width * ratio;    // Reset width to match scaled image
            }

            // Check if current height is larger than max
            if (height > maxHeight) {
                ratio = maxHeight / height; // get ratio for scaling image
                $(this).css("height", maxHeight);   // Set new height
                $(this).css("width", width * ratio);    // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
        });
    });
</script>

【讨论】：

【解决方案2】：

image {
display: block;
max-width: 119.0525vh;
max-height: 67vh;
width: auto;
height: auto;
}

来源：CSS force image resize and keep aspect ratio

【讨论】：

【解决方案3】：

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

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

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

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

计算是（图像宽度/图像高度）*视口高度的百分比=最大宽度

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

【讨论】：

【解决方案4】：

根据图像宽度设置 div 宽度试试这个：

var image = new Image()
image.onload = function(){
  $('.image-wrapper').width = image.width
}
image.src = 'http://designyoutrust.com/wp-content/uploads/2013/06/376.jpg';

【讨论】：