填充 Flexbox 图片库中的空白空间
问题描述 投票：0回答：1
我有这个使用 Flexbox 的 HTML/CSS 画廊。
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
:root {
--magnifier: 6;
--gap: 1vmin;
--transition: 0.5s;
}
.gallery {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap);
}
.child {
transition: flex var(--transition), filter var(--transition);
height: 100%;
flex: 1;
}
.child:hover {
flex: var(--magnifier);
}
img {
--brightness: 0.85;
--grayscale: 1;
height: 100%;
filter: grayscale(var(--grayscale)) brightness(var(--brightness));
object-fit: cover;
overflow: hidden;
}
img:hover {
--brightness: 1;
--grayscale: 0;
}<div class="gallery">
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
<div class="child"><a href="#">
<img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
</div>https://codepen.io/royfrancis/pen/LYawRax
悬停时肖像图像有空白区域。我希望
object:cover
1个回答
0
投票
投票
<a><img>width:100%height:100%;@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
:root {
--magnifier: 6;
--gap: 1vmin;
--transition: 0.5s;
}
.gallery {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap);
}
.child {
transition: flex var(--transition), filter var(--transition);
height: 100%;
flex: 1;
}
.child:hover {
flex: var(--magnifier);
}
.child a {
display: block;
width: 100%;
height: 100%;
}
img {
--brightness: 0.85;
--grayscale: 1;
width: 100%;
height: 100%;
filter: grayscale(var(--grayscale)) brightness(var(--brightness));
object-fit: cover;
overflow: hidden;
}
img:hover {
--brightness: 1;
--grayscale: 0;
}<div class="gallery">
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
<div class="child">
<a href="#">
<img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
</div>
</div>最新问题
- 执行多个并发（async let）任务并仅在所有任务都失败时抛出错误
- 如何使用 LinkedIn MemberSnapshot API 解决错误 404“未找到虚拟资源”？
- 如果我将 Typeform 连接到 Slack，我可以在提交 Typeform 时标记特定的人吗？
- Snakemake 无法确定通配符
- 如何在nextjs中只创建一个站点地图
- 为什么 sap.m.ActionSelect 被弃用，替代方案是什么？
- 从asp.net中的消息框中捕获事件
- win32 api函数获取处理器当前速度
- 即使我启用了castShadow和receiveShadow，3D场景也没有阴影
- 我无法在 Linux Mint 上的 VS Code 中运行 Chrome 调试器
- Vega Lite 图表上的一些数据最终显示在错误的柱上
- Xcode 运行时找不到模块“agora_rtc_engine”
- 读取 FIFO 文件时避免 100% cpu
- （Vue3 / Vite）不渲染嵌套的外部vue组件
- svg 和其他元素之间的白线
- 循环线性相关函数不返回 F 统计量或 p 值
- 如何升级rubygems
- 在 SQLAlchemy 中获取表名
- ASP.NET Web API 密钥身份验证|天蓝色
- 如何将自定义“卡片”保存到 dart/flutter 中的共享首选项？
© www.soinside.com 2019 - 2024. All rights reserved.