Question

您好，我想实现以下目标：

将图像裁剪为所需的宽高比（比方说2：1）
然后让它自动调整大小以适应盒子。

我想要裁剪，因为我有很多固定比例（2：1）的盒子（div）。如果我没有裁剪到所需的宽高比，则图像将展开或缩小以适合框。这个问题的另一个解决方案是对我不想要的图像进行封装。

有人能指出解决方案。

例如：如果图像是100px X 100px，我首先想要将其裁剪为66px X 33像素，然后让它展开，收缩以适合我的盒子，所有这些都是2：1。

Answer 1

如果您不需要将文件重写为不同的大小，则可以使用css有效地屏蔽其他元素中的图像，例如：

div {
 /* Image SRC */
 background: url(image.jpg) no-repeat center center fixed;

 /* Use Background Size Cover to Proportionally Fill Element */
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

 /* Size Element to Desired Background Ratio */
 width: 200px;
 height: 100px;
}

如果您确实需要生成可下载的裁剪图像，则必须使用某些服务器端代码（如PHP）生成图像，有关详细信息，请参阅此问题：Crop image in PHP

将图像裁剪为所需的外观，然后调整其大小

1 个答案: