Как изменить размер изображения, как в Google Plus в зависимости от высоты и сделать его отзывчивым

Я хочу сделать изображение масштабируемым в сети на всех платформах и для всех разрешений. Я очень впечатлен тем, как Google это делает. Например:

1900 - https://lh3.googleusercontent.com/-9xyCVGjVJjE/AAAAAAAAAAI/AAAAAAAAAG0/a4jFEtQ3ziY/s1900-c-k-no/photo.jpg

190 - https://lh3.googleusercontent.com/-9xyCVGjVJjE/AAAAAAAAAAI/AAAAAAAAAG0/a4jFEtQ3ziY/s190-c-k-no/photo.jpg

В Интернете есть много ресурсов, которые показывают, как изменить размер изображений в зависимости от размера экрана, но ни один из них не подходит Google Plus. Я получил несколько ссылок на тот же вопрос

Изменение размера изображения Google Script,

Изменить размер изображения, как Google,

http://www.quora.com/Google+/How-google-resize-images-dynamically-based-on-screen-size

Но ничто из перечисленного не решило мою проблему. Я могу изменить размер изображения, но не могу сделать его отзывчивым, как в Google Plus.

У меня есть знания по jquery, javascript, php. Я полагаю, что это как-то связано с библиотекой php gd и jquery или, возможно, с помощью медиа-запросов CSS, но не в состоянии решить проблему. Я попробовал следующие ресурсы, прежде чем задавать вопрос здесь:

  1. http://adaptive-images.com/ - Невозможно изменить размер изображения в зависимости от высоты. Хорошо масштабируется по ширине.

  2. http://boxresizer.com/

  3. Timthumb: http://www.binarymoon.co.uk/projects/timthumb/, http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/ - Это плохо масштабируется с высоты.

  4. Изменение размера изображения на стороне сервера: http://css-tricks.com/snippets/php/server-side-image-resizer/

  5. Изменение размера на основе CSS: http://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css flex-dynamically-resizing-images-with-css

Может кто-нибудь, пожалуйста, предложите мне решить проблему или помочь мне разобраться в моей проблеме на основе вышеуказанных ресурсов.

1 ответ

Решение Итана Маркотта здесь.

http://unstoppablerobotninja.com/entry/fluid-images/

Он парень, который впервые использовал термин "отзывчивый веб-дизайн". Надеюсь, это решит вашу проблему. Во всяком случае, хороший вопрос для возраста.

Другие вопросы по тегам