How to give image a max-height but retain aspect ratio?

Question

The image is 100% of the document width. I want the max-height of the image to be 2/3 of the screen height but to retain aspect ratio, and for the image to be centered.

Here is a Fiddle for a starting point.

EDIT: I've updated the fiddle to demonstrate one CSS solution I found (shown below in answers) but it would be preferable to have a solution that has more browser support.

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;
}

I've just started learning web development so I'm very new to all this. I've tried creating a function that says if image height >= 67vh then html width = image width but I couldn't get it to work.

Answer 1

This solution works although I would rather have a solution with better browser support.

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

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

The max-width was calculated with the aspect ratio of the original image in relation to viewport height.

Calculation is (image width / image height) * percentage of viewport height = max-width

In this case (1354px / 762px) * 67vh = 119.0525vh

Answer 2

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

source: CSS force image resize and keep aspect ratio

Answer 3

most common way I make is using div's background instead of img, set background-size 100% and leave height empty, it will keep aspect.

html:

<div class="image"></div>

css:

    .image {
        width: 100%;
        height: 100vh;
        background-image: url(http://designyoutrust.com/wp-content/uploads/2013/06/376.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
    }

Answer 4

If you application is intent to use any king of image in terms of aspect ratio and resolution. Then you can use below concept:

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>

Answer 5

for setting div width according to image width try this:

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