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

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

我希望这会有所帮助

>>> type(int('3'))
<class 'int'>

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;
}