图像在应用 align-items 后消失

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

Image disappears after applying align-items

问题

I need to apply 'align-items' to the flex container, but when I do, the image disappears.

我需要将 'align-items' 应用于 flex 容器,但当我这样做时,图像消失

I have a container that displays flex. And image inside that is in block using ratio 16/9.

我有一个显示 flex 布局的容器,容器内的图像按比例 16/9 显示为块。

I want to apply 'align-items' to .container class and expected the image not to disappear.

我想将 'align-items' 应用于 .container 类,并期望图像不会消失

英文:

I need to apply 'align-items' to the flex container, but when I do, the image disappears.

I have a container that displays flex. And image inside that is in block using ratio 16/9.

I want to apply 'align-items' to .container class and expected the image not to disappear.

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

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

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. background-color: #abbaea;
  5. width: 500px;
  6. height: 500px;
  7. justify-content: center;
  8. }
  9. .container &gt; div {
  10. background-color: #fbd603;
  11. }
  12. .container &gt; div .aspect-ratio-16-by-9 {
  13. position: relative;
  14. }
  15. .container &gt; div .aspect-ratio-16-by-9 .media {
  16. position: relative;
  17. top: 0;
  18. left: 0;
  19. width: 100%;
  20. }
  21. .container &gt; div .aspect-ratio-16-by-9 &gt; :first-child {
  22. width: auto;
  23. max-width: 100%;
  24. }
  25. .container &gt; div .aspect-ratio-16-by-9 &gt; img {
  26. max-height: 100%;
  27. }
  28. .container &gt; div .aspect-ratio-16-by-9::before {
  29. content: &quot;&quot;;
  30. display: block;
  31. padding-bottom: calc(100% / calc(16 / 9));
  32. }
  33. .container &gt; div .aspect-ratio-16-by-9 &gt; :first-child {
  34. position: absolute;
  35. top: 50%;
  36. left: 50%;
  37. transform: translate(-50%, -50%);
  38. height: auto;
  39. max-height: 100%;
  40. }

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

  1. &lt;div class=&#39;container&#39;&gt;
  2. &lt;div&gt;
  3. &lt;div class=&quot;aspect-ratio-16-by-9&quot;&gt;
  4. &lt;img class=&#39;media&#39; src=&#39;https://i.ibb.co/4S4J60N/tree1000-1.png&#39; /&gt;
  5. &lt;/div&gt;
  6. &lt;/div&gt;
  7. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

以下是翻译好的内容:

当你将 align-items 应用于 .container 时,它会占用水平轴上的所有可用空间,因此将子 div 压缩为 0 宽度。

这是因为子 div 上没有定义宽度。

要解决这个问题,向子 div 添加 width: 100%

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. background-color: #abbaea;
  5. width: 500px;
  6. height: 500px;
  7. justify-content: center;
  8. align-items: center; /* 新增 */
  9. }
  10. .container>div {
  11. width: 100%; /* 新增 */
  12. background-color: #fbd603;
  13. }
  1. <div class='container'>
  2. <div>
  3. <div class="aspect-ratio-16-by-9">
  4. <img class='media' src='https://i.ibb.co/4S4J60N/tree1000-1.png' />
  5. </div>
  6. </div>
  7. </div>
英文:

When you apply align-items to the .container, it consumes all available space in the horizontal axis and, as a consequence, squeezes the child div to 0 width.

This happens because there is no width defined on the child div.

To fix the problem, add width: 100% to the child div.

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

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

  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. background-color: #abbaea;
  5. width: 500px;
  6. height: 500px;
  7. justify-content: center;
  8. align-items: center; /* NEW */
  9. }
  10. .container&gt;div {
  11. width: 100%; /* NEW */
  12. background-color: #fbd603;
  13. }
  14. .container&gt;div .aspect-ratio-16-by-9 {
  15. position: relative;
  16. }
  17. .container&gt;div .aspect-ratio-16-by-9 .media {
  18. position: relative;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. }
  23. .container&gt;div .aspect-ratio-16-by-9&gt; :first-child {
  24. width: auto;
  25. max-width: 100%;
  26. }
  27. .container&gt;div .aspect-ratio-16-by-9&gt;img {
  28. max-height: 100%;
  29. }
  30. .container&gt;div .aspect-ratio-16-by-9::before {
  31. content: &quot;&quot;;
  32. display: block;
  33. padding-bottom: calc(100% / calc(16 / 9));
  34. }
  35. .container&gt;div .aspect-ratio-16-by-9&gt; :first-child {
  36. position: absolute;
  37. top: 50%;
  38. left: 50%;
  39. transform: translate(-50%, -50%);
  40. height: auto;
  41. max-height: 100%;
  42. }

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

  1. &lt;div class=&#39;container&#39;&gt;
  2. &lt;div&gt;
  3. &lt;div class=&quot;aspect-ratio-16-by-9&quot;&gt;
  4. &lt;img class=&#39;media&#39; src=&#39;https://i.ibb.co/4S4J60N/tree1000-1.png&#39; /&gt;
  5. &lt;/div&gt;
  6. &lt;/div&gt;
  7. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 22:58:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/76582257.html
匿名

发表评论

匿名网友

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

确定