שלמה גולדברג
shlomo@haravdotnet.co.il
בפרק הקודם למדנו על טבלאות, הפעם נראה מה יש לספרייה להציע לנו בעבודה עם תמונות.
הספרייה נותנת שני שירותים עיקריים בעבודה עם תמונות:
- תמיכה בהקטנת והגדלת התמונה לפי המקום שיש לה, בעזרת שימוש במחלקה img-responsive.
- מתן “מסגרת” לתמונה בעזרת אחד משלושת המחלקות הבאות:
- img-rounded – המעגל את הפינות של התמונה.
- img-circle – המעגל את כל התמונה
- img-thumbnail – הנותן מסגרת לתמונות.
כל תמונה הנמצאת בתוך col-[SIZE]-xx כלשהו (size כמובן זה הרזולוצייה הרלוונטית, כפי שלמדנו כאן) ו – xx זה המקום שניתן לעמודה (בין 1 ל – 12), התמונה תגדל ותקטן בהתאם למקום שיש לה תוך שמירה על יחס רוחב-גובה.
כל תמונה שתקבל את אחת משלושת המחלקות של המסגרת, תקבל את העיצוב המתאים.
הקוד הרלוונטי הוא כדלהלן:
Code Snippet
<div class="row">
<div class="col-xs-4">
<img src="../Content/images/p1.jpg" class="img-responsive img-circle" />
</div>
<div class="col-xs-4">
<img src="../Content/images/p2.jpg" class="img-responsive img-rounded" />
</div>
<div class="col-md-4">
<img src="../Content/images/p3.jpg" class="img-responsive img-thumbnail" />
</div>
</div>
<div class="col-xs-4">
<img src="../Content/images/p1.jpg" class="img-responsive img-circle" />
</div>
<div class="col-xs-4">
<img src="../Content/images/p2.jpg" class="img-responsive img-rounded" />
</div>
<div class="col-md-4">
<img src="../Content/images/p3.jpg" class="img-responsive img-thumbnail" />
</div>
</div>