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

Στην παρούσα στιγμή που γράφεται το άρθο, το 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 με 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 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;
}

Διατήρηση aspect ratio με μέγιστο ύψος

Αν θέλουμε aspect ratio να έχει περιορισμένο ύψος ή όπως στο παρακάτω παράδειγμα να πιάνει μέχρι 80vh, τότε στo container του aspect_box θα πρέπει να δηλώσουμε σχετικό max-width αντιστρέφοντας το calc να είναι width / height με τις ίδιες τιμές που θα βάλουμε στο aspect_box

.container{
    max-width: calc(WIDTH / HEIGHT * 80vh);
}
/* .......και τα λοιπά ως συνήθως */
.container .aspect_box {
    position: relative;
    width: 100%;
    padding-top: calc(HEIGHT / WIDTH * 100%);
}