css - 限制背景大小 : contain to the original image size

Question

我正在写相册，照片使用以下 CSS 显示在覆盖页面的 div 中:

.photoHolder {
    background-size: contain;
    background-image: url(theImage.jpg);
    background-position: 50% 50%;
    background-repeat: none;
    width: 100%;
    height: 90%;
    [...]
}

如果原始图像小于 photoHolder 的大小，则图像会被拉伸(stretch)并且看起来很粗糙。有没有一种方法可以在不使用 JavaScript 来限制 div 的大小的情况下停止这种情况？

当然，照片大小可以变化，photoHolder 的大小也可以变化(因为它占据了大部分可用窗口)。

Answer 1

你只需要删除

background-size: contain; 

导致背景图像拉伸(stretch)。