我遇到了一个问题，其中一个元素是根据未知图像的尺寸自动调整大小的。我希望这个图像的兄弟元素受到与图像设置的宽度相同的约束。不使用javascript。
我已经用钢笔表示我的意思：
.container {
display: table
}
.img-wrapper {
line-height: 0
}
.info {
display: table-cell;
vertical-align: middle;
background: black;
color: white;
}
.info p {
margin: 0 2vmin
}<div class="container">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>https://codepen.io/Slagon/pen/oNePqNo
.info有可能和.img-wrapper一样宽吗？(忽略此笔中预定义的尺寸(。
我使用引导来解决这个问题。从本质上讲，它的工作原理是一个跨越12 columns的普通网页。所以在这个例子中，我把你们每个div放在一个col-6中，这样每个元素就占据了页面的一半。这两个col-6跨度都包含在CCD_ 5中。请参见下文。
.container {
display: block;
justify-content: center;
}
.img-wrapper {
line-height: 0;
}
.info {
display: flex;
background: black;
color: white;
width: 100%;
height: 100%;
}
.col-6 > .img-wrapper > img {
width: 100%;
height: 100%;
margin: 0;
}
div.col-6 {
padding: 0;
}
p {
width: 100%;
text-align: center;
margin: auto;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-wrapper">
<img src="https://picsum.photos/600/500">
</div>
</div>
<div class="col-6">
<div class="info">
<p>Lorem ipsum </p>
</div>
</div>
</div>
</div>
</body>点击整页