Мобильная версияСуществует ряд вопросов о том, как увеличить изображение одним щелчком мыши, а затем снова нажать на увеличенное изображение, чтобы вернуть его к исходному размеру.
За последние 10 часов я пробовал многие из них, и ни один из них не дал того, что мне нужно.
Ниже я нашел одно решение, которое делает это, но использует масштаб.
Проблема в том, что он использует преобразование CSS, которое в некотором смысле масштабирует исходный размер изображения.
Вместо масштабирования я хочу, чтобы увеличенное изображение имело определенную ширину. Произнесите 800px независимо от исходного размера изображения.
Масштабирование работает неправильно. Если исходное изображение было маленьким, скажем, 100 пикселей, то при масштабировании, скажем, на 2, оно все равно будет маленьким, чтобы его можно было увидеть. А если исходное изображение было большим, масштабирование на 2 сделает его слишком большим. Поскольку я хочу использовать этот код для всех своих изображений, и все они разного размера, это не сработает.
Приведенный ниже код работает, но мне нужна помощь, чтобы изменить его, отказавшись от масштабирования на 2, чтобы вместо этого сделать увеличенное изображение шириной 800 пикселей, и я не знаю, как это сделать. CSS-преобразование требует масштабирования только настолько, насколько мне удалось выяснить.
Вот код
тело{/* только для иллюстрации*/ маржа: 0 авто; /* центр */ поле-верх: 200 пикселей; максимальная ширина: 640 пикселей; } /* ниже взято из https://stackoverflow.com/a/56401601/765271*/ .click-zoom input[type=checkbox] { дисплей: нет } .click-zoom img { переход: легкость трансформации 0,25 с; курсор: увеличение } .click-zoom input[type=checkbox]:checked~img { /* как изменить это, чтобы использовать точную ширину изображения вместо масштабирования?*/ преобразование: масштаб (2); курсор: уменьшение масштаба }
Не стесняйтесь изменить источник изображения выше. Я не знал, какое интернет-изображение использовать.
Ссылка на масштаб CSS
https://developer.mozilla.org/en-US/doc ... tion/scale
Вот демо-версия вышеизложенного на моем компьютере
тело{/* только для иллюстрации*/ маржа: 0 авто; /* центр */ поле-верх: 200 пикселей; максимальная ширина: 640 пикселей; } /* ниже взято из https://stackoverflow.com/a/56401601/765271*/ .click-zoom input[type=checkbox] { дисплей: нет } .click-zoom img { переход: легкость трансформации 0,25 с; курсор: увеличение } .click-zoom input[type=checkbox]:checked~img { преобразование: масштаб (2); курсор: уменьшение масштаба }
