Question

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

Here是起点的小提琴。

编辑：我已经更新了小提示，以演示我找到的一个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 width =图像宽度，但我无法使其工作。

非常感谢任何帮助。

Answer 1

根据图像宽度设置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';

Answer 2

虽然我宁愿拥有更好的浏览器支持解决方案，但这个解决方案仍有效。

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

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

使用原始图像相对于视口高度的纵横比计算最大宽度。

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

在这种情况下（1354px / 762px）* 67vh = 119.0525vh

Answer 3

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

来源：CSS force image resize and keep aspect ratio

Answer 4

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

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>

如何为图像提供最大高度但保留纵横比？

4 个答案: