使列的高度适应图像的响应式高度(Flexbox)

huangapple go评论76阅读模式
英文:

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

问题

我有这段代码,需要生成两个单独的结果:
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>
            文本....
        </center>
    </div>
    <div class="c0">
        <img src="gifS.png" id="mid"> <!-- 1920x1080图片 -->
    </div>
    <div class="r0">
        文本....
    </div>
</div>
英文:

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;
     }
    
     &lt;div class=&quot;container&quot;&gt;
     &lt;div class=&quot;l0&quot;&gt;
      &lt;center&gt;
         text....
      &lt;/center&gt;
     &lt;/div&gt;
     &lt;div class=&quot;c0&quot;&gt;
         &lt;img src=&quot;gifS.png&quot; id=&quot;mid&quot;&gt; /* 1920x1080 img */
     &lt;/div&gt;
     &lt;div class=&quot;r0&quot;&gt;
      text....
     &lt;/div&gt;
    

    </div>

答案1

得分: 0

img 元素上的 max-width: 100% 会导致图像在达到100%大小时停止缩放。此外,当容器缩小时,图像会改变其宽度以适应容器,从而减小其高度。

为了解决这个问题,设置图像的宽度和高度,以使其始终与容器的大小相同,并根据需要应用 object-fit 属性来调整图像的显示方法。

#mid {
  width: 100%; /* 添加 */
  height: 100%; /* 添加 */
  object-fit: cover; /* 添加 */
}

这段代码会使图像填充整个容器,并保持其宽高比。

英文:

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 */
}

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

@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 */
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;l0&quot;&gt;
&lt;center&gt;
Όποιος θεός κι αν είναι &lt;br&gt; έδωσε δώρο μητέρα γη&lt;br&gt;
&lt;br&gt; το τιμάς το δώρο τούτο &lt;br&gt; αν άξιος πάνω της περιπατείς &lt;br&gt;
&lt;br&gt; αν όλους εδώ μας θέλησε,&lt;br&gt; πνοή ζωής μας έδωσε,&lt;br&gt;
&lt;br&gt; αναπνοή, ολόκληρη μισή&lt;br&gt;
&lt;br&gt; ύδωρ και γη μελέτησε,&lt;br&gt; τη φύση παράδειγμα και δώρο, &lt;br&gt;
&lt;br&gt; ένα τραγούδι άφησε,&lt;br&gt; μια μελωδία ολόγυρα, &lt;br&gt;
&lt;br&gt; τα λόγια η φύση τραγουδά, &lt;br&gt; τα τραγουδά εις άπειρο, &lt;br&gt;
&lt;br&gt; είναι γραμμένα εδώ, &lt;br&gt; είναι το δείγμα ολόγυρα, &lt;br&gt;
&lt;br&gt; και σαν μην έφτανε αυτό,&lt;br&gt; έδωσε κι άλλο δώρο&lt;br&gt;
&lt;br&gt; μια σκέψη, πλασμένη &lt;br&gt; από αγάπη, ολόκληρη μισή &lt;br&gt;
&lt;br&gt; αν υπάρχουν, καλύτερα από τούτα&lt;br&gt; πες μου αν μπορείς,&lt;br&gt;
&lt;br&gt;&lt;br&gt; θυμήσου μόνο,&lt;br&gt;
&lt;br&gt; πνοή ζωής έπήρες δώρο,&lt;br&gt; αγάπη, ολόκληρη μισή.&lt;br&gt;
&lt;br&gt; και εμείς ;&lt;br&gt;
&lt;br&gt; μην είμαστε &lt;br&gt; Αδέλφια, πατέρες, μητέρες,&lt;br&gt; παιδιά όλοι, των ίδιων &lt;br&gt; εμείς ;&lt;br&gt;
&lt;br&gt; οικογένεια μια, να λέγαμε &lt;br&gt; μια στέγη, μαζί &lt;br&gt;
&lt;br&gt; ένα να είμαστε &lt;br&gt; παιδιού μικρού, ψυχή &lt;br&gt;
&lt;br&gt; ο κόσμος παράδεισος ένας, &lt;br&gt; όμορφος από ότι έχουμε φανταστεί&lt;br&gt;
&lt;br&gt; μη λόγο να βάλουμε &lt;br&gt; όρκο να πάρουμε, &lt;br&gt;
&lt;br&gt; εμείς ;&lt;br&gt;
&lt;br&gt; μοναχά καλό να υπάρχει &lt;br&gt; να ζηλεύουν τα όνειρα κάθε στιγμή&lt;br&gt;
&lt;br&gt; μπουκέτα λουλούδια &lt;br&gt; μες τη καρδιά μας &lt;br&gt; ερωτευμένοι κάθε στιγμή &lt;br&gt;
&lt;br&gt; μη λόγο να πράτταμε &lt;br&gt; σκέψη και αγάπη να βάζαμε, &lt;br&gt;
&lt;br&gt; εμείς ;&lt;br&gt;
&lt;br&gt; όρκο θα πάρουμε μητέρα γη&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
&lt;/div&gt;
&lt;div class=&quot;c0&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/500x1000/ffffff/888888/500x1000.png&quot; id=&quot;mid&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;r0&quot;&gt;
&lt;center&gt;
He who has a Why to live can bear almost any how.&lt;br&gt;
&lt;/center&gt;
scriver: -Friedrich Wilhelm Nietzsche&lt;br&gt;
&lt;center&gt;
&lt;br&gt; *
&lt;br&gt;
&lt;br&gt; He who can properly define and divide &lt;br&gt; is to be considered a god
&lt;br&gt;
&lt;/center&gt;
scriver: Plato
&lt;center&gt;
&lt;br&gt; *
&lt;br&gt;
&lt;br&gt; Before cure someone, &lt;br&gt; (mentally or physically) ask him if &lt;br&gt; he is willing to let go all those things &lt;br&gt; that make him sick &lt;br&gt;
&lt;/center&gt;
-Hippocrates &lt;br&gt;
&lt;center&gt;
&lt;br&gt; *
&lt;br&gt;
&lt;br&gt; A work of art is the unique &lt;br&gt; result of a unique temperament. &lt;br&gt; Its beauty comes from the fact that &lt;br&gt; the author is what he is. &lt;br&gt; It has nothing to do with the fact &lt;br&gt; that other people want what they want.&lt;br&gt;
&lt;/center&gt;
-Oscar Wilde&lt;br&gt;
&lt;center&gt;
&lt;br&gt; Happy is the man that findeth wisdom, &lt;br&gt; and the man that getteth understanding.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: -Proverbs &lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; Ask yourself what is really important &lt;br&gt; and then have the courage &lt;br&gt; to build your life around your answer.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: unknown &lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; Know thyself.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: Socrates&lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; Integrity is doing the right thing &lt;br&gt; even when no one is watching. &lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: C.S. Lewis&lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; If a movement is to have an impact, &lt;br&gt; it must belong to those who join it, &lt;br&gt; not only those who lead it. &lt;br&gt;
&lt;/center&gt;
scriver: -Simon Sinek&lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; It is the individual who is not interested &lt;br&gt; in his fellow ,men, &lt;br&gt; who has the greatest difficulties in life and &lt;br&gt; provides the greatest injury to others. &lt;br&gt; It is from among such individuals &lt;br&gt; that all humans failures spring.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: Alfred Adler&lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; The more diverse the plant foods we eat &lt;br&gt; the more diverse our gut microbiome becomes &lt;br&gt; and the more abundant our health is.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: Dr. Will Cole&lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; He who can properly define &lt;br&gt; and divide is to be considered a god&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: Plato &lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; The moment you change your perception, &lt;br&gt; is the moment you rewrite the chemistry of your body.&lt;br&gt;
&lt;br&gt;
&lt;br&gt; Love is a gift to be used every day,&lt;br&gt; Not be smothered and hidden away. &lt;br&gt; Love is not a thing to be stored &lt;br&gt; in the chest where you gather your keepsakes, &lt;br&gt; And treasure your best. &lt;br&gt; Love is a gift to be used every day.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: Norah Perkins&lt;br&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt; Before you cure someone, &lt;br&gt; ask him if he is willing to let go &lt;br&gt; all those things that make him sick.&lt;br&gt;
&lt;br&gt;
&lt;/center&gt;
scriver: - Hippocrates &lt;br&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月4日 02:00:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/59583223.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定