html - 使列的高度调整为图像的响应高度(Flexbox)
问题描述
我有这段代码,我需要制作 2 个单独的结果:
https://jsfiddle.net/29Lxsq1m/
1. 使左右 divs(l0,r0) 调整到图像高度 2. 将图像对齐到中心我试图用各种方法来实现第二种情况,但如果这些都是愚蠢的 q,似乎没有任何借口可以解释,但我现在已经尝试了 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>
解决方案
max-width: 100%
元素上的会img
导致图像以 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>
推荐阅读
- java - next 对于链表中的每个节点有什么值?
- javascript - 在 Javascript 中使用字符串构建网格
- sql - 使用 r 从 SQL Server 数据库导入并显示 jpeg
- javascript - 如何等到 HTTP 请求完成才能完成功能
- python - 在 Jenkins 中,如何运行调用 AWS CLI 的 Python 脚本
- python - Flask-Socket.IO 检查哪个用户断开连接
- sql - 带有条件结果的 SQL DB2 递归查询
- objective-c - macOS 应用程序在 10.13 上崩溃,找不到符号:_NSAppearanceNameDarkAqua
- javascript - JS,如何设置 textarea 值
- html - Right aligned custom list heading