Making column's height adjust to an image's responsive height(Flexbox ) - html

Question

I have this piece of code and I need to make 2 separate results :
https://jsfiddle.net/29Lxsq1m/
1. Make the left and right divs(l0,r0) adjust to image height
2. Align the image to the center
I have tried to achieve the 2nd scenario with various but nothing seems to work excuse if these are dumb q's but I have been trying to make this 5 hours now and my mental can't handle this anymore I am also open to a way of solving my problem not using Flexbox
.container {
width:100%;
height:1000px;
display:flex;
}
.l0 {
width: 249px;
flex: 0 0 249px;
height:100%;
overflow:auto;
}
.c0 {
width:100%;
height:100%;
}
.r0 {
width: 249px;
flex: 0 0 249px;
height:100%;
overflow:auto;
color:white;
}
img {
max-width:100%;
}
#mid {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="l0">
<center>
text....
</center>
</div>
<div class="c0">
<img src="gifS.png" id="mid"> /* 1920x1080 img */
</div>
<div class="r0">
text....
</div>
</div>

Answer 1

The max-width: 100% on the img element causes the image to stop scaling at 100% size. Also, when the container shrinks, the image changes its width to fit the container, thereby reducing its height.
To solve this, set the width and height of the image so that it is always the same size as the container, and adjust the display method of the image by applying the object-fit property as appropriate.
#mid {
width: 100%; /* add */
height: 100%; /* add */
object-fit: cover; /* add */
}
#font-face {
font-family: Open-sans;
src: url(OpenSans-Light.ttf);
}
body {
font-family: Open-sans;
background-color: grey;
background-repeat: repeat-y;
background-size: 100%;
}
.container {
width: 100%;
height: 1000px;
display: flex;
}
.l0 {
width: 249px;
flex: 0 0 249px;
height: 100%;
overflow: auto;
}
.c0 {
width: 100%;
height: 100%;
}
.r0 {
width: 249px;
flex: 0 0 249px;
height: 100%;
overflow: auto;
color: white;
}
img {
max-width: 100%;
}
#mid {
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* add */
height: 100%; /* add */
object-fit: cover; /* add */
}
<div class="container">
<div class="l0">
<center>
Όποιος θεός κι αν είναι <br> έδωσε δώρο μητέρα γη<br>
<br> το τιμάς το δώρο τούτο <br> αν άξιος πάνω της περιπατείς <br>
<br> αν όλους εδώ μας θέλησε,<br> πνοή ζωής μας έδωσε,<br>
<br> αναπνοή, ολόκληρη μισή<br>
<br> ύδωρ και γη μελέτησε,<br> τη φύση παράδειγμα και δώρο, <br>
<br> ένα τραγούδι άφησε,<br> μια μελωδία ολόγυρα, <br>
<br> τα λόγια η φύση τραγουδά, <br> τα τραγουδά εις άπειρο, <br>
<br> είναι γραμμένα εδώ, <br> είναι το δείγμα ολόγυρα, <br>
<br> και σαν μην έφτανε αυτό,<br> έδωσε κι άλλο δώρο<br>
<br> μια σκέψη, πλασμένη <br> από αγάπη, ολόκληρη μισή <br>
<br> αν υπάρχουν, καλύτερα από τούτα<br> πες μου αν μπορείς,<br>
<br><br> θυμήσου μόνο,<br>
<br> πνοή ζωής έπήρες δώρο,<br> αγάπη, ολόκληρη μισή.<br>
<br> και εμείς ;<br>
<br> μην είμαστε <br> Αδέλφια, πατέρες, μητέρες,<br> παιδιά όλοι, των ίδιων <br> εμείς ;<br>
<br> οικογένεια μια, να λέγαμε <br> μια στέγη, μαζί <br>
<br> ένα να είμαστε <br> παιδιού μικρού, ψυχή <br>
<br> ο κόσμος παράδεισος ένας, <br> όμορφος από ότι έχουμε φανταστεί<br>
<br> μη λόγο να βάλουμε <br> όρκο να πάρουμε, <br>
<br> εμείς ;<br>
<br> μοναχά καλό να υπάρχει <br> να ζηλεύουν τα όνειρα κάθε στιγμή<br>
<br> μπουκέτα λουλούδια <br> μες τη καρδιά μας <br> ερωτευμένοι κάθε στιγμή <br>
<br> μη λόγο να πράτταμε <br> σκέψη και αγάπη να βάζαμε, <br>
<br> εμείς ;<br>
<br> όρκο θα πάρουμε μητέρα γη<br>
<br>
</center>
</div>
<div class="c0">
<img src="https://via.placeholder.com/500x1000/ffffff/888888/500x1000.png" id="mid">
</div>
<div class="r0">
<center>
He who has a Why to live can bear almost any how.<br>
</center>
scriver: -Friedrich Wilhelm Nietzsche<br>
<center>
<br> *
<br>
<br> He who can properly define and divide <br> is to be considered a god
<br>
</center>
scriver: Plato
<center>
<br> *
<br>
<br> Before cure someone, <br> (mentally or physically) ask him if <br> he is willing to let go all those things <br> that make him sick <br>
</center>
-Hippocrates <br>
<center>
<br> *
<br>
<br> A work of art is the unique <br> result of a unique temperament. <br> Its beauty comes from the fact that <br> the author is what he is. <br> It has nothing to do with the fact <br> that other people want what they want.<br>
</center>
-Oscar Wilde<br>
<center>
<br> Happy is the man that findeth wisdom, <br> and the man that getteth understanding.<br>
<br>
</center>
scriver: -Proverbs <br>
<center>
<br>
<br> Ask yourself what is really important <br> and then have the courage <br> to build your life around your answer.<br>
<br>
</center>
scriver: unknown <br>
<center>
<br>
<br> Know thyself.<br>
<br>
</center>
scriver: Socrates<br>
<center>
<br>
<br> Integrity is doing the right thing <br> even when no one is watching. <br>
<br>
</center>
scriver: C.S. Lewis<br>
<center>
<br>
<br> If a movement is to have an impact, <br> it must belong to those who join it, <br> not only those who lead it. <br>
</center>
scriver: -Simon Sinek<br>
<center>
<br>
<br> It is the individual who is not interested <br> in his fellow ,men, <br> who has the greatest difficulties in life and <br> provides the greatest injury to others. <br> It is from among such individuals <br> that all humans failures spring.<br>
<br>
</center>
scriver: Alfred Adler<br>
<center>
<br>
<br> The more diverse the plant foods we eat <br> the more diverse our gut microbiome becomes <br> and the more abundant our health is.<br>
<br>
</center>
scriver: Dr. Will Cole<br>
<center>
<br>
<br> He who can properly define <br> and divide is to be considered a god<br>
<br>
</center>
scriver: Plato <br>
<center>
<br>
<br> The moment you change your perception, <br> is the moment you rewrite the chemistry of your body.<br>
<br>
<br> Love is a gift to be used every day,<br> Not be smothered and hidden away. <br> Love is not a thing to be stored <br> in the chest where you gather your keepsakes, <br> And treasure your best. <br> Love is a gift to be used every day.<br>
<br>
</center>
scriver: Norah Perkins<br>
<center>
<br>
<br> Before you cure someone, <br> ask him if he is willing to let go <br> all those things that make him sick.<br>
<br>
</center>
scriver: - Hippocrates <br>
<br>
</div>
</div>