I have a project where I am putting together a photo album, with the photos displayed within a div that covers the entire page. Here is the CSS code used:
.photoHolder {
background-size: contain;
background-image: url(theImage.jpg);
background-position: 50% 50%;
background-repeat: none;
width: 100%;
height: 90%;
[...]
}
The issue I am facing is that when the original image is smaller than the photoHolder, it gets stretched and loses quality. Is there a way to prevent this stretching without resorting to using JavaScript to limit the size of the div?
It's important to note that both the photo sizes and the size of photoHolder can vary, as it takes up most of the available window.