Html 为什么浏览器大小改变时我的列不调整大小
我在网格中有4列4个图像，我希望它们根据浏览器大小调整大小。这4幅图像在悬停时有一个模糊过滤器，文本在悬停时有一个模糊过滤器。Wo、we、wa和pool类是列中的单个图像 我没有尝试太多，因为我不知道问题从哪里开始，我对CSS还是有点陌生Html 为什么浏览器大小改变时我的列不调整大小,html,css,Html,Css,我在网格中有4列4个图像，我希望它们根据浏览器大小调整大小。这4幅图像在悬停时有一个模糊过滤器，文本在悬停时有一个模糊过滤器。Wo、we、wa和pool类是列中的单个图像 我没有尝试太多，因为我不知道问题从哪里开始，我对CSS还是有点陌生 <div class="images"> <div class="pool"> <h2> Here </h2> <img src="img/cpu.jpg"> </div> <di
<div class="images">
<div class="pool">
<h2> Here </h2>
<img src="img/cpu.jpg">
</div>
<div class="we">
<h2> Here </h2>
<img src="img/cubes.jpg">
</div>
<div class="wo">
<h2> Here </h2>
<img src="img/preme.jpg">
</div>
<div class="wa">
<h2> Here </h2>
<img src="img/hand.jpg">
</div>
</div>
.images {
display: grid;
grid-template-columns: repeat(4,1fr);
padding: 2rem 3.5rem;
grid-gap: 10px;
position: relative;
}
.images img{
height:9rem;
width:15rem;
padding: 5px;
transition: .3s;
}
.images h2 {
position: absolute;
padding-left: 5.5rem;
padding-top: 3.5rem;
color: white;
justify-content: center;
transition: .3s;
opacity: 0;
z-index: 1;
height: 6rem;
width: 9rem;
margin: .1rem .22rem;
}
.images h2:hover {
opacity: 1;
}
.pool {
grid-column: 1;
}
.we {
grid-column: 2;
}
.wa {
grid-column: 4;
}
.wo {
grid-column: 3;
}
.pool:hover img {
filter:blur(5px) brightness(60%);
}
.wa:hover img {
filter:blur(5px);
}
.we:hover img {
filter:blur(5px);
}
enter code here
.wo:hover img {
filter:blur(5px);
}
在这里
在这里
在这里
在这里
.图像{
显示：网格；
网格模板列：重复（4,1fr）；
填充：2rem3.5rem；
栅隙：10px；
位置：相对位置；
}
.图像img{
高度：9雷姆；
宽度：15雷姆；
填充物：5px；
过渡：.3s；
}
.图像h2{
位置：绝对位置；
左侧填充：5.5雷姆；
垫面：3.5rem；
颜色：白色；
证明内容：中心；
过渡：.3s；
不透明度：0；
z指数：1；
身高：6雷姆；
宽度：9雷姆；
保证金：1雷姆22雷姆；
}
.图片h2：悬停{
不透明度：1；
}
.游泳池{
网格柱：1；
}
.我们{
网格柱：2；
}
wa先生{
网格柱：4；
}
wo先生{
网格柱：3；
}
.pool:悬停img{
滤镜：模糊（5px）亮度（60%）；
}
.wa：悬停img{
过滤器：模糊（5px）；
}
.我们：悬停img{
过滤器：模糊（5px）；
}
在这里输入代码
.wo：悬停img{
过滤器：模糊（5px）；
}
.images img{
height:100%;
width:100%;
padding: 5px;
transition: .3s;
}
将%设置为所需值。您应该将.img图像更改为我的css
.images img{
height:100%;
width:100%;
padding: 5px;
transition: .3s;
}