Как включить масштабирование изображений, установленных на 100% в CSS?

Question

Как включить увеличение изображений, даже если они установлены на 100% ширины в CSS?

Этот вопрос может показаться contradictionary - если вы установите что-то по ширине 100%

img { 
    width: 100%; 
    height: auto; 
    padding: 0; 
    border: 0; 
    margin-bottom: 0.66em; 

вы хотите, как это, не так ли?

Хорошо ... Рисунок этого: есть галерея изображений, на которой вы хотите быть на 100% шириной. Пользователь масштабирует, и это только увеличит масштаб текста. Изображения будут оставаться на 100% при любом уровне масштабирования.

То, что я хотел бы это поведение:

Изображения 100% в ширину на нейтральном уровне масштабирования, но когда пользователь изменяет масштаб изображения страницы, изображения увеличены, а также, хотя: Изображения изменены всегда быть на 100% от окна, даже если пользователь изменяет размер браузера (при нормальном масштабировании).

Есть ли только решение для CSS?

Возможное решение с использованием javascript будет устанавливать ширину изображения в пиксели окна браузера в javascript. Zoom будет работать для изображений, как ожидалось. Когда пользователь изменяет размер браузера, javascript должен снова изменить ширину изображений.

Answer 1

Поведение масштабирования зависит от браузера и даже настраивается, в зависимости от используемого вами браузера поведение - это то, что вы описываете или чего хотите!

Единственный способ контролировать поведение - реализовать масштабирование себя. Javascript - это один из способов, но имейте в виду, что браузер zoom никогда не под вашим контролем. Это связано с соображениями доступности. Ваш собственный зум позволит пользователям увеличивать изображение другим способом, в зависимости от того, какие элементы вы решите, с которым работает ваш скрипт.

Answer 2

К сожалению, это невозможно сделать без JavaScript, из-за функции, которая вам нужна, это увеличение на PX, которое они нависают над ... Итак, да, вы можете получить его слишком, но изображение не изменится когда они перемещают курсор по изображению, как и следовало ожидать. Вы должны выбрать jQuery или любую другую библиотеку JavaScript, такую ​​как Mootools.

Простой поиск по Google for something like jQuery Zoom - вы будете поражены количеством готовых плагинов, чтобы сделать эту задачу легкой для вас.

Вот два, что я нашел, которые отвечают вашим требованиям:

• Jacklmoore jQuery Zoom
• jQZoom - Example 4
• Jquery Image Zoom Plugin - Inner Zoom Example

Answer 3

я встретил тот же вопрос.

Первое, что нужно сделать, - это то, что на мобильных устройствах все еще работает. Для других устройств вы можете установить минимальную ширину: 100% вместо ширины. Это позволит вам увеличить масштаб, но не выйти.

Другим решением является установка ширины в рх в зависимости от размера экрана с помощью медиа запросов, как:

@media only screen and (min-device-width:1440px) 
@media only screen and (max-device-width:960px) 
@media only screen and (min-device-width:768px) 
@media only screen and (max-device-width: 550px) 
@media only screen and (max-device-width:480px) 
@media only screen and (max-device-width: 400px) 

Спасибо!