<div>的大小应始终保持不变

Question

所以我有这段代码来显示一张卡（面板），该卡（面板）由下面带有链接的图片组成。现在，div的高度随着每个图像而变化，因为图像的大小不同。 我希望div的高度始终与图像大小无关。

可能这只是一个CSS更改。有什么想法吗？

events

Answer 1

你好，只需为div元素的“宽度”属性设置默认值即可：

componentDidUpdate(prevProps) {
    if(prevProps.location.pathname !== this.props.location.pathname){
        fetchData()
    }
}

或

css：

<div width = "1000px"></div>

您可以将div内使用的图像标签或div标签添加为默认大小，并控制溢出属性的外观宽度。示例：

css：       溢出：隐藏；

Answer 2

一种可能的解决方案是调整图像大小以适合div的高度。因此，首先我们遍历图像（我不知道您的图像在哪里，preview类？）然后像他的父母一样设置高度，这里是一个示例：

document.querySelectorAll(".images img").forEach(function(i){
i.height = i.parentElement.clientHeight;
})

.images{
  height: 100px; 
}

<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Dickweiler_Wegekreuz.jpg" />
</div>
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Echternach_mairie.jpg" />
</div>
<div class="images">

</div>

在这种情况下，我使用的是clientHeight（仅包括填充），但可能是offsetHeight（包括填充，scrollBar和边框）