Css 如何减少弹性项目之间的差距

发布于04月28日

我正在努力缩小我的图像之间的差距，当悬停在上面时，这些差距会扩大.

我希望它看起来是这样的: expectation个

但它目前看起来是这样的:reality

我目前拥有的:

.container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15%;
  height: 100vh;
}

.mask {
  flex: 1;
  clip-path: polygon(40% 0, 60% 0, 30% 100%, 10% 100%);
  transition: 0.2s ease-in;
  gap: 2px;
}

.mask>img {
  width: 100%;
  height: calc(100% - 10vh);
  object-fit: cover;
}

.mask:hover {
  flex: 1 2 5%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

<div class="container">
  <div class="mask">
    <img src="https://picsum.photos/id/22/4434/3729">
  </div>
  <div class="mask">
    <img src="https://picsum.photos/id/15/2500/1667">
  </div>
  <div class="mask">
    <img src="https://picsum.photos/id/10/2500/1667">
  </div>
  <div class="mask">
    <img src="https://picsum.photos/id/3/5000/3333">
  </div>
</div>

我试着调整利润率，甚至使用负值，但这似乎是不对的.

感谢您的建议，谢谢.

.container { --gap: 2px; display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 0 15%; height: 100vh; gap: var(--gap); } .mask { transition: 0.2s ease-in; height: calc(100% - 10vh); flex-basis: calc(calc(100% - 3 * var(--gap)) / 4 * 0.6); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); } .mask>img { width: 100%; height: 100%; object-fit: cover; } .mask:hover { flex-grow: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

<div class="container"> <div class="mask"> <img src="https://picsum.photos/id/22/4434/3729"> </div> <div class="mask"> <img src="https://picsum.photos/id/15/2500/1667"> </div> <div class="mask"> <img src="https://picsum.photos/id/10/2500/1667"> </div> <div class="mask"> <img src="https://picsum.photos/id/3/5000/3333"> </div> </div>

.container { --gap: 10px; display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 0 15%; height: 100vh; gap: var(--gap); } .mask { transition: 0.2s ease-in; height: calc(100% - 10vh); flex-basis: 50px; transform: skewX(-10deg); } .mask>img { width: 100%; height: 100%; object-fit: cover; } .mask:hover { flex-grow: 1; margin: 0 40px; transform: skewX(0); }

Css 如何减少弹性项目之间的差距

推荐答案

Css相关问答推荐

CSS Grid，意想不到的差距

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

text-size-adjust在我的css中曾经在我的手机上的Chrome上工作，停止工作，仍然在我妻子的手机上工作

VueJS3+Vutify中缺少一些CSS类

如何在Delphi的TMS Web Core上向窗体添加背景图像

CSS 字符串变量的正确null值是多少？

flex 容器中的两个滚动块

CSS Slanding Div 边缘在图像上

基于类的 CSS Select 器

基于内容显示(show)/隐藏(hide)同级div

如何将 .btn-group 从 twitter-bootstrap 居中？

Angular Material 中的样式垫 Select

CSS媒体查询仅针对iPad和iPad？

HTML 元素默认为 display：inline-block？

水平列表项

使用边距：0 自动；在 Internet Explorer 8 中

如何对齐标签和文本区域？

删除行内块元素中大文本上方和下方的空白

使用 CSS go 除图像之间的空间

height： 100% 或 min-height： 100% 用于 html 和 body 元素？