Как изменить размер изображения без изменения соотношения сторон и обрезки изображения

Question

Я пытаюсь изменить размер фонового изображения, используя только CSS, сохраняя его пропорции неизменными и не обрезая изображение с любой стороны

Я пытался размер фона: обложка; // обрезает изображение с боков при изменении размера браузера

размер фона: 100% 100%; // оно сжимает изображение, и его фактическое соотношение пропало для фактического изображения, но холст изображения не поврежден с его соотношением сторон

.class {
    max-width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
  }

.class {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
  }

Изображение не должно обрезаться или уменьшаться при изменении размера браузера / мобильных устройств, строго соблюдая пропорции.