Можно ли сделать так, чтобы картинка которая прижата к правому краю экрана(с помощью position: absolute) не обрезалась при адаптирование?
Вот сам блок с фотографией: https://imgur.com/a/yU0grgb
Вот макет сам макет: https://www.figma.com/file/udMIX9x9wtMoVQGgf0fNfz/...
Дополнительно:
покажите свою верстку, стили, тогда и ответ будет дельный
Если она перестанет быть контентной, то абсолютом будет псевдоэлемент. Которому вы ограничите ширину, а фон впишете в эту ширину с помощью подходящего bg size
Ответы:
Не прижимать её к правому краю с поморью absolute, вестимо.
Например: положи во флекс и прижми с помощью flex-end. Потом моешь поставить ей max-width: полный размер, min-width: минимальный - чтоб сжималась если не влезает...
Тащем верстай.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того, чтобы сделать так, чтобы картинка, которая прижата к правому краю экрана с помощью position: absolute, не обрезалась при адаптировании, можно использовать несколько подходов.
Один из способов - использовать свойство right вместо left и указать значение в процентах. Например, если вы хотите, чтобы картинка была прижата к правому краю на 20% ширины экрана, вы можете использовать следующий CSS:
.image { position: absolute; top: 0; right: 20%; }
Таким образом, при изменении размеров экрана, расстояние между картинкой и правым краем будет оставаться постоянным.
Еще один способ - использовать свойство transform: translateX для смещения картинки на определенное расстояние от правого края экрана. Например, для смещения на 20px от правого края экрана, вы можете использовать следующий CSS:
.image { position: absolute; top: 0; right: 0; transform: translateX(-20px); }
Этот способ также позволит сохранить картинку прижатой к правому краю экрана при адаптировании.
Надеюсь, эти подходы помогут вам решить проблему с обрезанием картинки при адаптировании. Если у вас остались вопросы или нужна дополнительная помощь, не стесняйтесь задавать их.