HTML/CSS 隐藏不适合 block 的元素，没有固定高度

Question

基本上，我将页面分成两部分(2/3 和 1/3)。左侧有动态内容，它是我的网格的主要内容。右边也有动态内容，图片+文字。

我有以下网格:

article {
  width: 66.6%;
  box-sizing: border-box;
  background: red;
}

aside {
  width: 33.4%;
  background: blue;
  box-sizing: border-box;
  position: absolute;
  left: 66.6%;
  overflow: hidden;
  top: 0;
  bottom: 0;
  font-size: 18px;
}

.wrapper {
  display: flex;
  position: relative;
}

<div class='wrapper'>
<article>
   text
   <br>
   text
</article>

  <aside>
    <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg">
  </aside>
</div>

你看，图像正在被剪切，这是基本的溢出逻辑。但我只想在图片溢出时不显示它。

Answer 1

希望对你有帮助

if ($('img').height() > $('article').height()) {
  $('img').css('display', 'none');
}

article {
  width: 66.6%;
  box-sizing: border-box;
  background: red;
}

aside {
  width: 33.4%;
  background: blue;
  box-sizing: border-box;
  position: absolute;
  left: 66.6%;
  overflow: hidden;
  top: 0;
  bottom: 0;
  font-size: 18px;
}

.wrapper {
  display: flex;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class='wrapper'>
  <article>
    text
    <br> text
  </article>

  <aside>
    <img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg">
  </aside>
</div>