我如何使缩略图标题也响应？
我想让这些缩略图更小一些，在页面中间更靠近一些，我设法做到了，但即使缩略图保持响应性，标题容器却不是，当我缩小和放大页面时，它的大小保持不变。现在的代码工作得很好，但当我想让缩略图更小一些，更靠近一些时，一切都走下坡路了。
有谁能帮助我使文本也是有反应的吗？
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
共有1个答案
我认为主要的问题是你在图像标题上的填充。如果你缩小了图像的宽度，那么你将不得不设置标题的宽度来计算宽度减去填充的百分比--这应该会起作用。
在下面的例子中，我将你的图像设置为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>-
我尝试使用以下指南在youtube上上传缩略图：https://developers.google.com/youtube/v3/docs/thumbnails/set 我能够使用以下curl在postman上成功运行它： 然而，我很难将其翻译成js，到目前为止我所做的是： （为了简化逻辑，我只手动键入上面的代码，如果有任何输入错误，请原谅。） 但是这抛出的
-
主要内容：实例,添加自定义的内容,实例本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail 的 <a> 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。 下面的实例演示了默认的
-
本章讨论Bootstrap缩略图。 许多网站需要一种在网格中布置图像，视频，文本等的方法，而Bootstrap可以通过缩略图轻松实现此目的。 使用Bootstrap创建缩略图 - 在图像周围添加一个带有.thumbnail类的<a>标签。 这会添加四个填充像素和一个灰色边框。 在悬停时，动画光晕会勾勒出图像。 以下示例演示了一个默认缩略图 - <div class = "row"> <div
-
我在我的wordpress网站上使用NextGen Gallery插件。我的问题是，我的图库的缩略图不会显示它们的完整标题，而只显示第一部分。如果图库的标题是“完整的标题”，它只会在缩略图下显示“完整的......”。就像如果没有足够的空间来写完整的标题。这使得你很难找到你要找的照片。有没有办法显示完整的标题？这里是一个链接到我的网站，所以你可以看到：http://tornaia.com/bild
-
我有一个页面，可以显示类别中的帖子。 我希望使用此代码 问题是，我不能显示缩略图。 我正在努力寻找如何发布缩略图网址并放入其中
-
问题内容： 我想创建一个带有缩略图的图像文件视图，所以我将FileView子类化，并在创建方法中进行了一些缩放，以便显示缩略图图像。 但是，总体效果是，该小部件在打开目录并显示缩略图之前需要花费一些时间。在下面的createImageIcon（）中，我需要两次调用new ImageIcon（）两次，分别使用图像文件路径和下一次调整大小的图像作为构造函数参数。我认为这是使小部件变慢的原因。 有没有更