猫鼬填充选定的字段 - CSS

介绍

猫鼬填充（Martenstyn）是一种 CSS 技巧，可以用来填充选定的字段，使其比例保持不变。

使用方法

1. 首先，需要给选定的字段添加一个类名，比如 .martenstyn。

.martenstyn {
  position: relative;
  overflow: hidden;
}

2. 然后，使用猫鼬填充技巧，将内容包裹在一个 div 中。这个 div 的类名要与之前添加的类名相同。

.martenstyn::before {
  content: "";
  display: block;
  padding-top: 100%; /* 这里的值表示高度与宽度比为 1：1，可以根据需要调整 */
}
.martenstyn > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

示例代码

HTML

<div class="martenstyn">
  <img src="https://via.placeholder.com/300" alt="">
</div>

CSS

.martenstyn {
  position: relative;
  overflow: hidden;
}

.martenstyn::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.martenstyn > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

注意事项

• 如果选定的字段不是块级元素，需要添加 display: block;。
• 如果选定的字段已经设置了指定的高度，不需要使用猫鼬填充技巧。
• 猫鼬填充技巧还可以用于创建固定宽高比的视频、音频和嵌入式内容。