Html 如何使该网格不调整大小?
我找到了我正在使用的链接下方的图像网格,但是当前当网格调整大小时,正方形变小了,我希望它使正方形彼此降低,而不是调整大小。这怎么可能?我尝试过添加浮动和调整宽度,但我显然错过了一些愚蠢的事情 CSS 在px中使用高度和宽度,并将display:inline block设置为.container li .集装箱{ 边框:1px实心fff; } .集装箱ul{ 显示:块; 浮动:左; 宽度:100%; } 李先生{ 框大小:边框框; 显示:内联块; 溢出:隐藏; 位置:相对位置; 高度:300px; 宽度:300px; 背景色:000; 边框:2个实心fff; } .集装箱李:悬停h3{ 不透明度:1; 过渡:全部。3秒轻松进退。1秒; } .集装箱李:悬停img{ 不透明度:1; 变换:scale1; } .集装箱李h3{ 位置:绝对位置; 左:0px; 最小高度:3em; 填充:15px; 右:0px; 顶部:0px; z指数:10; 背景:线性梯度180度,rgba0,0,0,0.65,透明; 颜色:fff; 字体大小:16px; 字体大小:粗体; 线高:1.5em; 不透明度:0; 过渡:所有.3s易于输入输出; 保证金:0; } .李先生{ 位置:绝对位置; 底部:0; 左:0; 最大高度:110%; 最大宽度:110%; 不透明度:.7; 右:0; 排名:0; 转换:scale1.1; 过渡:所有.3s易于输入输出; z指数:0; } 第一项 第一项 第一项 第一项 第一项 第一项 第一项 第一项 第一项Html 如何使该网格不调整大小?,html,css,image,grid,gallery,Html,Css,Image,Grid,Gallery,我找到了我正在使用的链接下方的图像网格,但是当前当网格调整大小时,正方形变小了,我希望它使正方形彼此降低,而不是调整大小。这怎么可能?我尝试过添加浮动和调整宽度,但我显然错过了一些愚蠢的事情 CSS 在px中使用高度和宽度,并将display:inline block设置为.container li .集装箱{ 边框:1px实心fff; } .集装箱ul{ 显示:块; 浮动:左; 宽度:100%; } 李先生{ 框大小:边框框; 显示:内联块; 溢出:隐藏; 位置:相对位置; 高度:300px
.container {
border: 1px solid #fff;
ul {
display: block;
float: left;
width: 100%;
}
li {
box-sizing: border-box;
display: block;
float: left;
overflow: hidden;
position: relative;
padding-bottom: 33.3%;
width: 33.3%;
background-color: #000;
border: 2px solid #fff;
&:hover {
h3 {
opacity: 1;
transition: all .3s ease-in-out .1s;
}
img {
opacity: 1;
transform: scale(1);
}
}
h3 {
position: absolute;
left: 0px;
min-height: 3em;
padding: 15px;
right: 0px;
top: 0px;
z-index: 10;
background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1.5em;
opacity: 0;
transition: all .3s ease-in-out;
}
img {
position: absolute;
bottom: 0;
left: 0;
max-height: 110%;
max-width: 110%;
opacity: .7;
right: 0;
top: 0;
transform: scale(1.1);
transition: all .3s ease-in-out;
z-index: 0;
}
}
}