У меня есть 750px x 500px изображение, и мне нужно поместить его в 1200px x 1000px коробку.Изображение должно быть обрезано с разных сторон, и только большое подмножество масштабируется до большого поля.
Я использовал следующий фрагмент кода для реализации операций обрезки и изменения размера.Решение основано на этом вопросе.
#top-image {
position: absolute;
background-image: url(https://via.placeholder.com/750x500);
background-size:
calc(750px * (1200 / (750 - 103 - 105)))
calc(500px * (1000 / (500 - 47)));
background-position:
calc(-105px * (1200 / (750 - 103 - 105)))
0px;
filter: brightness(85%);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Следующий шаг - применить простой эффект параллакса к этому фоновому изображению, добавив следующую строку в #top-image:
background-attachment: fixed;
Однакодобавление вышеупомянутой строки приводит к искажению обрезанного и измененного размера изображения, так что изображение отличается от изображения без эффекта параллакса.
Как следует обрезать и изменить размер, чтобы получить одно и то же изображение независимо от того, является ли вышеупомянутая строкадобавлено или нет?