[Homework] Web Fundamentals (HTML + CSS) - Responsive Design - Bootstrap - септ.2014
Никой не иска да пусне тема за домашното :)
Ето моите решения:
Код - GigHub.
01. Unresponsive-Homework - DEMO; /в preview-то под Google Chrome aside ми пада долу вдясно неясно защо, под Firefox е ок, при отваряне директно от компютъра при мен е добре - ако някой може да разбере защо се получава така.../;
02. Flowers Home - DEMO;
03. Bootstrap Boot Camp - DEMO.
Коментари и препоръки са добре дошли.
Забележка: CSS-а ми не е от най-подредените - върху това имам да поработя.
Аз съм го направил с настройване на width на снимката - първо е 24%, след това 32,2% и накрая 49%.
Само не можах да разположа снимките на третия ред по една в края, а в средата да остане празно място...
Разположението не ми е проблем. Иначе и аз подхождам така, смалявам картинките (само че със зуум, което по-скоро не трябва да го ползвам май). Ще пробвам с проценти.
За разположението: justify-content: space-between. Виж дали ще стане.
Не се получава..., намачква ми картинките :)
2-ра задача с тоя flexbox доста ме измъчи, но накрая като почнах да му свиквам кое как се държи, започна да ми харесва доста. Големината на снимките и аз го правя с проценти, като слагам и малко margin-top.
А, за да се показват 2 в края с празно място по средата, div - а който държи галерията го правя също flexbox със следните параметри:
section div {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
Тая вечер ще мъча 3-та, но тепърва почвам да чета за bootstrap
Преборих се. Наистина след като се свикне с флексбокса нещата стават доста добре.
Ключовите моменти:
Ползвам justify-content: space-between - това подрежда снимките както трябва на по-ниските резолюции.
За снимките задавам ширина - съответно 24%, 32% и 49% на различните стъпки.
За да се запази aspect ratio-то на снимките ползвам object-fit: contain. Иначе се разтягат и става отвратително грозно.
Това води до проблем, че височината на снимките е доста голяма (самите снимки се визуализират нормално, но все пак заемат място все едно не са оразмерени и нещата не изглеждат много добре). Затова им давам максимална височина 150px.
Аз с височината на снимките се справям като си задам width в % според нуждите и height: 100%.
height: 100% не вършеше работа, снимките все пак заемаха място около 300px. Абе занимавка отвсякъде... Поне се радвам, че го нагодих що-годе.
Е да то зависи и от други селектори какво е правено с тях. При мен стана с height: 100%. Дори ако го изключа се разпъва много по височина.
Колега Filkolev имах същия проблем с размера на снимките като теб. И при мен предложението на nikola.m.nikolov за height 100% не вършеше работа в първия момент. Аз бях задал ширината на снимките с flex-basis: 24% (не знам дали и ти си направил така), но когато промених на width: 24% (и добавих height 100%) всичко си дойде на мястото.