Aspect Ratio CSS:
Responsive Εικόνες και Boxes σε συγκεκριμένες αναλογίες

Δημοσιεύθηκε 23/05/2021

Στην παρούσα στιγμή που γράφεται το άρθο, το css property: aspect ratio έχει μερική υποστήριξη από τους broswers. Μέχρι να ενημερωθούν όλοι οι broswers, ο ακόλουθος τρόπος μας βοηθάει στο να δημιουργήσουμε “αναλογικά κουτιά”.

Aspect Ratio με padding-top

Το padding-top (και padding-bottom) έχει την ιδιότητα πως αν χρησιμοποιήσουμε τιμή ποσοστού, για να υπολογιστεί το τελικό μέγεθος λαμβάνει το ποσοστό επί του width του parent element.

Κατ’ αυτό τον τρόπο αν ένα element έχει width 200px και δηλώσουμε padding-top: 100%, τότε αυτό μεταφράζεται σε padding-top:200px

Αυτή την ιδιότητα θα χρησιμοποιήσουμε για να δημιουργήσουμε aspect ratio boxes.

CSS βασικός κώδικας για Aspect Ratio

<div class="aspect_box">
     <img src="image.jpg" />
</div>
.aspect_box {
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.aspect_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

Το αποτέλεσμα είναι ένα τετράγωνο (λόγω padding-top 100%) που εμπεριέχει μία εικόνα:

aspect ratio rectangle

Διαφορετικά Aspect Ratio με calc

Διατηρώντας τον παραπάνω κώδικα και μετατρέποντας απλώς την τιμή του padding-top, δημιουργούμε διαφορετικές αναλογίες του box-εικόνας.

padding-top: calc(HEIGHT / WIDTH * 100%);

Μερικά παραδείγματα:

  • Aspect Ration 16:9 – padding-top: calc(9 / 16 * 100%);
  • Aspect Ration 5:2 – padding-top: calc(2 / 5 * 100%);
  • ….
aspect 16 9
Aspect Ration 16:9
aspect 5 2
Aspect Ration 5:2

Εικόνα και Κείμενο μέσα σε aspect ratio

Παρακάτω ο κώδικας για να βάλουμε περιεχόμενο κειμένου πέρα από την εικόνα (όπως συμβαίνει στις προηγούμενες φωτογραφίες)

<div class="aspect_box">
    <div class="content">
        <h1>16 : 9</h1>
        <img src="image.jpg" />
    </div>
</div>
.aspect_box {
    position: relative;
    width: 100%;
    padding-top: calc(9 / 16 * 100%);
}
.aspect_box .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.aspect_box .content h1 {
    background-color: white;
    padding: 20px;
    width: fit-content;
    margin: 50px auto;
}
.aspect_box .content img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
    z-index: -1;
}