How to make an image not stretch

Question

On my front page I want the post thumbnail to be the full width of the page. But I only want it to be the full width of the page up until the image width it was uploaded at. So when the page gets bigger and bigger I want the image to stop being 100% once it gets to its actual image size and then just stay that size. Right now I have figured out how to make the post thumbnail full width, however as the page gets bigger the image just stretches to fit 100%. How could I fix this?

.large-front-thumbnail {
    position: relative;
    width: 100%;
    height: auto;
}

Answer 1

You need to make 2 changes.

Right now you're setting the image width to 100%. When you set width to 100%, no matter what size the image was uploaded at, it's going to stretch to the width of the container. You need to set width to auto.

You then want to set a max-width of 100%. Those 2 properties combined will mean your image will scale responsively yet never exceed the original upload size.

.large-front-thumbnail {
    height: auto;
    max-width: 100%;
    position: relative;
    width: auto;
}