Как да си направим един и същ размер на изображения в списъка, без да се създава миниатюри галерии поради CSS
Проблемът за много уебмастъри, за да създадете галерии, снимки, списъци, или когато извеждате умалени изображения на стоката подлежи на същите пропорции. Съгласете удоволствие да гледам миниатюри на еднакви пропорции, отколкото ако те бяха discordantly.
Аз обикновено решава този проблем чрез преливане: скрит; и Разделение, което определя лимит на височината на снимките. Казвам ви по-късно. Първо нека да разгледаме различните етапи възможността за създаване на умалени изображения на един и същ размер от най-лошото за най-добрите.
Така че, предполагам, че ние имаме галерия в два реда от по три снимки във всяка. Всички снимки на височината и ширината на различни размери, и ние трябва да имат едни и същи миниатюрите. Ние правим това чрез CSS. Онлайн демо и изтеглите изходния код, можете да в долната част на урока.
Тя ще изглежда така по целия път:
Тук всяка снимка е обвито в DIV с ramka на класа, към който се определя на имота, за да се приведе в съответствие снимката в ляво. И снимките, възложени .gallery1 размер IMG 150px ширина. Тъй като не е уточнено височината, а след това се зарежда оригинал, за да не се наруши пропорциите на снимки. Защо е този метод за всички рангове се изнесе - поради факта, че височината на картината е винаги различна. Този метод не е подходящ.
Вариант 2 (със задачата принудени пропорции на картината)
Това нарежда с картината не се движат из в този пример, ние си поставихме за принудително височината и ширината на всяка снимка. В резултат на това, изображенията стават изкривени пропорции.
Вариант 3 (за задаване на желаните пропорции на снимки и намаляване височината)
Това е един от най-добрите начини, за да донесат снимки под един формат. Аз го използвам и до днес, аз все още не са се научили на имот обектно-Fit. Погледнете .gallery3 .ramka - тук сега преливане: скрит; дивата което ограничава размера на посочената в него от 150x150px. Ширината на изображението е зададен на 100%.
Чрез този метод, всичко, което излиза от дива повече от 150px ще бъдат отрязани. Въпреки факта, че на снимки в галерията изглежда посредствен - това е направено нарочно, за да се покаже липсата на метод. Към галерията е повече от приятно, че е необходимо да се ограничи височината на диви, като например 100 пиксела, а след това всички изображения без изкривявания са в един размер. Но недостатък е, че на изображения с много високо изрязани в долната част.
Вариант 4 (със задачата съответните пропорции на изображенията, дължащи се на обектно-добре: покривка;)
Този пример показва, перфектно как да се създаде галерия в HTML с една и съща миниатюрата. Обърнете внимание на кода на .gallery5 IMG - Сега тук ни се дава желания размер на миниатюрите и обектно-добре функция: покривка; което прави "подрязване" на снимки в движение. Pictures "отрязани" в центъра, без изкривяване.
В свойствата на обектно-удобно има няколко възможности.
запълване - мащабирани запазване пропорции, но с изкривявания (като вариант 2).
съдържа - елемента се мащабира да се поберат в клетката без изкривяване или изрязване
капак - изображението се мащабира (намалява или увеличава), така че да се вписват напълно да няма изкривяване (като опция 4).
Надявам се, че този урок ще ви помогне да лесно да създадете красива миниатюрна със същия размер изображения без предварителна обработка на изображения.
виж също
- Задръжте ефекти върху изображението в CSS3. Галерия на изображения с увеличаване на CSS3
- Как да промените реда на Разделение блокове в мобилната версия поради CSS
- CSS3 отражение ефект от картинката (-webkit кутия-отразява).
- Всички ефекти CSS3 мишката върху изображението
Позволява ви да създадете бързо всякакъв вид форма за обратна връзка за вашия уеб сайт с отметки, полета, бутони за избор на файлове, както и много възможности!