请参阅以下代码笔:https ://codepen.io/allen-houng/pen/XGMjMr ? editors = 1100#0
<div>
<img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
<div class="description">
Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
</div>
</div>
我有一个带有两个子div的父div-一个图像和一个描述。我正在根据视口高度调整图像大小,这意味着宽度将是动态的且响应迅速。.description
在没有javascript的情况下,如何调整相应的同级div的大小以匹配图像的宽度?
使容器inline-block
然后强制文本的宽度为,0
以便容器的宽度由图像定义(文本对宽度没有贡献),然后再次强制宽度100%
使用min-width
.parent {
background: pink;
display:inline-block;
}
img {
display: block;
max-height: 70vh;
}
.description {
width:0;
min-width:100%;
}
<div class="parent">
<img src="https://picsum.photos/id/1004/900/600">
<div class="description">
Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
</div>
</div>
即使没有图像,同样的技巧也可以工作,因为您需要根据另一个元素来调整元素的大小。
文字示例:
.parent {
background: pink;
display:inline-block;
}
.description {
width:0;
min-width:100%;
}
<div class="parent">
<h2>a title that will define the width</h2>
<div class="description">
Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
</div>
</div>
第一个示例的另一个技巧是考虑图像的比例,以了解需要定义的宽度:
.parent {
background: pink;
display:inline-block;
}
img {
display: block;
max-height: 70vh;
}
.description {
max-width:calc(70vh * 1.5);
}
<div class="parent">
<img src="https://picsum.photos/id/1004/900/600">
<div class="description">
Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
</div>
</div>