html - 使列高度调整为图像响应高度(Flexbox)

Question

我有这段代码，我需要生成 2 个单独的结果: https://jsfiddle.net/29Lxsq1m/
1. 使左右div(l0,r0)调整为图片高度 2. 将图像居中对齐 我已经尝试用各种方法来实现第二种情况，但如果这些是愚蠢的问题，似乎没有任何借口，但我现在一直在努力完成这 5 个小时，我的精神无法再处理这个问题，我也愿意接受一种解决方法我没有使用 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

img 元素上的 max-width: 100% 会导致图像在 100% 大小时停止缩放。此外，当容器收缩时，图像会更改其宽度以适合容器，从而降低其高度。

为了解决这个问题，设置图像的宽度和高度，使其始终与容器大小相同，并通过应用 object-fit 属性调整图像的显示方式为合适的。

#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>