css 如何根据图像数量调整宽度

flvlnr44 于 2023-03-25 发布在其他

关注(0)|答案(2)|浏览(154)

我有一个容器，其中包含随机数量的图像（1-3）和文本。
如果有一个图像，图像需要采取整个宽度，如果有两个一半的宽度等
我怎么能实现这样的事情？
我的密码是-

.images {
    display: flex;
}

.images img {
    max-height: 520px;
}

<div className="container">
    <div className="user-container">
        <div className="avatar">M</div>
        <div className="user-data">
            <div>Username</div>
            <div>Time</div>
        </div>
    </div>
    <div className="content">
   Some Random Text
    </div>
    <div className="images">
        <img src="https://picsum.photos/id/222/200/300">
        <img src="https://picsum.photos/id/231/200/300">
    </div>
</div>

css

来源：https://stackoverflow.com/questions/75800703/how-to-adjust-width-based-on-number-of-images

2条答案

按热度按时间

3htmauhk1#

你必须告诉这些图像均匀地调整大小。为此，你将flex-grow和flex-shrink都设置为1（你可以使用简写flex: 1 1）。之后，还告诉这些图像从0开始填充可用的空间

.images img {
  flex: 1 1;
  max-height: 512px;
  width: 0;
}

这将空间出你的所有图像，不管你有多少。
如果不指定width: 0，图像将尝试采用其固有宽度，导致溢出。

赞(0）回复(0）举报 2023-03-25

iszxjhcz2#

你可以通过使用flex来实现这一点。
将父项设置为display: flex，然后将相同的flex设置为查尔兹，项目将增长或收缩以适应其Flex容器中的可用空间。
flexbox
flex property

.images {
    display: flex;
}

.images img {
    flex: 1
}

基于您的代码的示例：
https://codesandbox.io/s/gallant-fire-gjr1db?file=/style.css

赞(0）回复(0）举报 2023-03-25

我来回答

css 如何根据图像数量调整宽度

2条答案

相关问题

热门标签

最新问答