css div撑满然后等比缩小

要实现 div 撑满容器并且保持等比例缩放，可以使用如下 CSS 样式：

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 比例的占位符，可根据实际比例调整 */
}

.container > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片等比例缩放并填充整个容器 */
}

这里使用了一个占位符技巧，首先将容器的高度设为 0，然后设置一个 padding-bottom 属性，它的值是按照图片比例计算得出的百分比，这样就能让容器的高度等比例缩放。接着使用绝对定位将图片放到容器的左上角，并设置宽度和高度为 100%，这样就能让图片撑满整个容器。最后使用 `object-fit: cover;` 属性让图片等比例缩放并填充整个容器。

相关问题

css 撑满然后等比缩小

要实现这个效果，可以使用如下 CSS 样式：

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

这样设置可以让图片在容器内撑满，并且保持等比例缩放。其中 `width: 100%;` 和 `height: auto;` 可以让图片自适应容器的宽度，并且高度按照图片的比例自动计算。`max-width: 100%;` 和 `max-height: 100%;` 则是为了限制图片的最大宽度和最大高度，防止图片过大超出容器。

css div 等比缩小

要实现 CSS div 等比缩小，可以使用 CSS3 的 `transform` 属性中的 `scale` 方法，将元素缩小到指定大小。例如，如果想将一个 div 元素等比缩小到原来的一半，可以将其样式设置为：

div {
  transform: scale(0.5);
}

这样就可以将该元素等比缩小到原来的一半大小。如果希望在缩小时保持原来的中心点不变，可以使用 `transform-origin` 属性来设置缩放的中心点，例如：

div {
  transform: scale(0.5);
  transform-origin: center;
}

这样就可以在缩小时保持元素的中心点不变。