顺风CSS收缩图像以适合标题

Question

是否可以只使用CSS来缩小图像以适合下面的标题?

我的模型在这里输入链接描述

.container {
border: 1px solid red;
height: 400px;
width: 300px;
padding: 10px;
margin: 0;
}
figure {
margin: 0;
padding: 0;
}
figure img {
display: block;
margin: 0 auto;
}
figure figcaption {
margin-top: 10px;
}

<div class="container">
<figure>
<img src="https://placehold.it/250x250">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</figcaption>
</figure>
</div>

理想情况下，我想实现使用TailWindCSS v2

Answer 1

你可以试试下面的CSS网格:

.container {
border: 1px solid red;
height: 400px;
width: 300px;
padding: 10px;
margin: 0;
}
figure {
margin: 0;
padding: 0;
height: 100%; /* take the height of container */
display: grid; /* a grid layout */
grid-template-rows: 1fr auto; /* two rows where the first one fill the space */
}
figure img {
display: block;
margin: 0 auto;
height: 0; /* the image won't increase the height of the grid */
min-height: 100%; /* fill all the remaining space */
}
figure figcaption {
margin-top: 10px;
}

<div class="container">
<figure>
<img src="https://placehold.it/250x250">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</figcaption>
</figure>
</div>