תמונות גמישות

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 66 מתוך 76.

בעיצוב אתרים רספונסיבי, תמונות גמישות מתאימות את עצמן אוטומטית לגדלי מסך שונים, וכך נראות טוב בכל המכשירים. ללא גמישות, התמונות עלולות להיות גדולות מדי במסכים קטנים או לשבש את פריסת הדף.

איך להפוך תמונות לגמישות:

1. שימוש ב-CSS max-width
הגדרת max-width: 100% מבטיחה שתמונות לעולם לא יהיו רחבות יותר מהמכל שלהן.

img {
  max-width: 100%;
  height: auto; /* שומר על יחס הגובה-רוחב */
}

2. השתמשו ביחידות של אזור התצוגה
אפשר לקבוע את גודל התמונות באמצעות vw (רוחב אזור התצוגה) כדי שהן ישתנו בהתאם לגודל המסך.

img {
  width: 50vw; /* התמונה תופסת 50% מרוחב אזור התצוגה */
}

אתגר

קל

נתון לך מסמך HTML עם תמונה. המשימה שלך היא להפוך את התמונה לרספונסיבית, כך שתתאים את עצמה לגדלי מסך שונים.

כתוב כלל CSS שחל על כל האלמנטים שהמחלקה שלהם היא img-max. הגדר את max-width ל-100% ואת height ל-auto.
כתוב כלל CSS שחל על כל האלמנטים שהמחלקה שלהם היא img-vw. הגדר את width ל-50vw ואת height ל-auto.

נסו בעצמכם

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>