时间戳

首页 > 解决方案 > 怎么能缩放到兄弟姐妹的高度？

html - 怎么能缩放到兄弟姐妹的高度？

问题描述

标题非常自我描述。请记住，容器元素应该有自己的宽度和高度，如示例所示。虽然这个示例是用 flexbox 编写的，但我不介意使用其他方法，只要它是纯 HTML/CSS 即可。

我觉得这应该是微不足道的，但我一直在寻找一段时间，包括 Stack Overflow 上的相关答案，我似乎无法找到任何令人满意的答案。

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  margin-left: 8px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div>
    <h1>Lorem Ipsum</h1>
    <h2>Dolor Sit Amet, here's some extra text</h2>
  </div>
  <img src="https://lorempixel.com/g/64/64/" />
</body>

</html>

标签： htmlcssflexbox

解决方案

如果您添加更多的 div，这是可能的。

.wrapper {
  display: flex;
  align-items: stretch;
}

img {
  height: 100%;
}
<body>
  <div class="wrapper">
    <div>
      <h1>Lorem Ipsum</h1>
      <h2>Dolor Sit Amet, here's some extra text</h2>
    </div>
    <div class="img-wrap">
      <img src="https://lorempixel.com/g/64/64/">
    </div>
  </div>
</body>

推荐阅读