Есть ли способ сделать загрузку изображений только определенных размеров через CSS?

Question

По сути, я спрашиваю, есть ли способ сказать изображение размером 1000x1000 пикселей и просто иметь некоторый код, будь то HTML, CSS или что-то еще, чтобы загрузить только измененную версию размером 100x100 пикселей.Есть какой-либо способ сделать это?Я хотел бы знать, прежде чем изменить размер каждой из моих фотографий и загрузить их и связать эти фотографии с оригинальной увеличенной версией.Благодарю.

Answer 1

Вы не можете сделать это с HTML / CSS, но это возможно с серверным языком, таким как PHP. Вот скрипт , который позволит вам изменять размеры изображений.

Суть в том, что изменение размеров изображений может быть интенсивным процессом на сервере. Вам следует убедиться, что после создания измененной версии изображения оно кэшируется на сервере для последующих запросов.

Вдоль этих линий поток должен быть:

1. Приходит запрос изображения.
2. Существует ли уменьшенный эскиз в кеше сервера? Если да, подайте миниатюру.
3. Если нет, создайте миниатюру, поместите ее в кэш сервера и обслужите.

Примечание: Джеймс поднял хорошую мысль в комментариях. Если изменяемые изображения будут изменяться (обновляться / редактироваться), вам необходимо отслеживать дату последнего изменения большого изображения при создании миниатюры (как часть имени файла или в базе данных).

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

Answer 2

Вы можете создать учетную запись на imageshack.us (создайте учетную запись, чтобы убедиться, что ваши изображения не будут удалены), а затем загрузите изображение в другом размере и создайте ссылку на любой нужный размер. (Вам не нужно делать изменение размера самостоятельно, вы можете сделать это на imageshack при загрузке) Таким образом, вы получите изображение любого размера и без какой-либо нагрузки на ваш сервер.

Это то, что я делаю, и это прекрасно работает

Пример:

http://img52.imageshack.us/img52/1825/lakesunset.jpg

http://img12.imageshack.us/img12/6420/lakesunsetf.jpg

Оба пришли прямо из imageshack. Просто дважды загрузил изображение и изменил размер одного на imageshack.

Затем, чтобы отобразить миниатюру и связать ее с большей, просто используйте этот код:

<a href="DIRECT LARGE IMAGE URL"><img src="DIRECT SMALL IMAGE URL"/></a>

Пример:

http://img12.imageshack.us/img12/6420/lakesunsetf.jpg

Извините, я никогда не занимался программированием на стороне сервера, так как я не профессионал и я беден, поэтому я не могу помочь вам, если это то, что вы ищете.