gpt4 book ai didi

html - Bootstrap 中的等高网格,带有 Flexbox 的多维图像

转载 作者:行者123 更新时间:2023-11-28 01:35:41 25 4
gpt4 key购买 nike

我有各种不同尺寸的图像,它们需要在 bootstrap 网格中具有相同的高度。

如何在 Bootstrap 中复制这种等尺寸显示?我试过对子项使用“flex 1”,但没有任何乐趣,也尝试过“flex: 1 0 0%;”在源代码和网络上的其他一些等高教程中使用,没有任何乐趣。

我认为这里的解决方案是制作大小相等的矩形 div,但对使用所有比例的 flexbox 获得相等高度的 div 的方法也很感兴趣。

最佳答案

如果您控制图像文件,您最好的选择可能是手动将图像裁剪成正确的尺寸。

如果您不控制源图像(如果您从远程服务加载,如演示中的 instagram),那么您将通过在 div 上设置明确的高度然后加载来获得最佳结果图像作为背景,background-size: cover;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

关于html - Bootstrap 中的等高网格,带有 Flexbox 的多维图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50687191/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com