在 CSS 中自动移动图像的简单方法 - Easy way to auto-move images in css

Easy way to auto-move images in css

本文关键字：图像简单方法移动 CSS | 更新日期: 2023-09-27

我的目标是拍摄图像（大小各不相同）并使其适合设置的容器（330x330像素）。我不想调整图像大小。我想简单地让 css 让它自动移动自己以处理图片，就好像它是用 330x330 裁剪的一样。

如果我放一张小于 330x330 的图片，那么我认为它必须放大它。例如，如果它是 200x800，那么它会将其拉伸，然后垂直移动图像以显示中心？

这是可能的，还是如果没有很多烦人的 PHP，我试图做的事情是不可能的？谢谢

您可以使用：

div {
  width: 330px;
  height: 330px;
  background: url("http://placekitten.com/800/200") 50% 50% no-repeat;   
  background-size: cover;
}

它应该适用于：IE9+，Firefox 4+，Opera，Chrome和Safari 5+。