Currently, I am facing an issue with scaling images in the header sourced from a database. The dimensions of these images can vary but are limited to a maximum size of 2000x2000px. When attempting to scale these images, particularly those over 1000px, they appear too large and do not look aesthetically pleasing. This is the code snippet that I have been using:
#image {
position: absolute;
display: block;
top: 20px;
left: 20px;
height: 50px;
}<div id="wrapper">
<img src="some-dynamic-url" id="image">
</div>background-size: cover, but this does not stretch the image as needed while maintaining the aspect ratio. How can I set a max-width and max-height to ensure the image does not become excessively large?
After some revisions, my updated code now looks like this:
#image {
display: block;
top: 20px;
left: 20px;
width: 100%;
max-width: 170px;
}<div id="wrapper">
<img src="some-dynamic-url" id="image">
</div>