Как оптимально изменить размер (ширину и высоту) изображения для миниатюры

306

06 апреля 2017, 17:26

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

Answer 1

Используйте классы 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">