我想让这些缩略图更小一些，在页面中间更靠近一些，我设法做到了，但即使缩略图保持响应性，标题容器却不是，当我缩小和放大页面时，它的大小保持不变。现在的代码工作得很好，但当我想让缩略图更小一些，更靠近一些时，一切都走下坡路了。
有谁能帮助我使文本也是有反应的吗？
null
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
background: rgb(255, 255, 255);
padding: 20px;
}
.box>img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}
.box:hover {
transform: scale(1.04);
}
.box .title {
background: #ddd;
padding: 0.5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
</html>null
我认为主要的问题是你在图像标题上的填充。如果你缩小了图像的宽度，那么你将不得不设置标题的宽度来计算宽度减去填充的百分比--这应该会起作用。
在下面的例子中，我将你的图像设置为50%的宽度，并将标题上的填充量从左右1rem减少到左右0.5rem。然后我将标题的宽度设置为calc(50%-1rem)（如果我将填充设置为1rem，那么它应该是-2rem等）。我还将你的网格最小值减半（大致），从230降至110。
现在图像标题适合图片下方，它确实很明显地换行了，因为它的大小只有图片的一半，但是文本长度会根据标题的大小而变化。
希望这是你正在寻找的！
null
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
background: rgb(255, 255, 255);
padding: 20px;
}
.box>img {
width: 50%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
.box:hover {
transform: scale(1.04);
}
.title {
background: #ddd;
padding: 0.5rem 0.5rem;
text-align: center;
width: calc(50% - 1rem);
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
</html>