0

Доброго времени суток! Подскажите как оптимально изменить размер (ширину и высоту) изображения для миниатюры. Можно ли из оригинала сделать несколько миниатюр? Нужно из фотографии сделать несколько миниатюр, примерно 100х100, 200х200, 500х500, не для одной фотографии, а для фотоальбома. При помощи php в цикле будет долго грузить изображения, может есть какие ни будь варианты на js, css, html типа как <img height="100" width="100" src="img.png"> - меня этот вариант впринципе устраивает, ну не знаю можно ли так позьзоваться для миниатюр из большой фотографии. Несколько миниатюр нужно так как сайт будет с веб и мобильной версией, что бы не загружать на сайт разные версии картинок под комп. и телефон. версию, тем самым сэкономить место.

4
  • ajax к картинкам применить (lazy load), или через css 100х100, 200х200, 500х500 дать по медиа запросам, или же обрезать/сжать/унифицировать все изображения к этим размерам под разные версии 4 апр 2017 в 20:44
  • очень странный вопрос, на клиент сайде ты все равно будешь сначала качать файл, потом его менять. Так что либо через gulp/grunt делать дубликаты и их использовать при билде проекта, либо серверно. 4 апр 2017 в 20:47
  • а можно готовый пример? новичёк в этом деле
    – Den
    4 апр 2017 в 21:06
  • Нашёл такой вариант dbmast.ru/adaptivnye-izobrazheniya-s-pomoshhyu-css можно ли его "оптимально" использовать для миниатюр из оригинального изображения?
    – Den
    4 апр 2017 в 21:15

1 ответ 1

0

Используйте классы css

img{
float:left;
margin: 5px 10px;
}
.clear-fix{
clear: both;
}
img.tumb{
 width: 100px;
}

img.middle-tumb{
 width: 300px;
}
<img src="http://www.abc.net.au/news/image/7887996-1x1-700x700.jpg">
<img src="http://www.abc.net.au/news/image/1265148-1x1-700x700.jpg">
<img src="https://static.365info.kz/uploads/2014/08/1408438931_bez-imeni-1-700x700.jpg">
<div class="clear-fix"></div>
<img src="http://www.abc.net.au/news/image/7887996-1x1-700x700.jpg" class="tumb">
<img src="http://www.abc.net.au/news/image/1265148-1x1-700x700.jpg" class="tumb">
<img src="https://static.365info.kz/uploads/2014/08/1408438931_bez-imeni-1-700x700.jpg" class="tumb">
<div class="clear-fix"></div>
<img src="http://www.abc.net.au/news/image/7887996-1x1-700x700.jpg" class="middle-tumb">
<img src="http://www.abc.net.au/news/image/1265148-1x1-700x700.jpg" class="middle-tumb">
<img src="https://static.365info.kz/uploads/2014/08/1408438931_bez-imeni-1-700x700.jpg" class="middle-tumb">

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.