如何裁剪/调整图像大小以使用CSS更改宽高比 [英] How to crop/resize an image to change the aspect ratio using CSS

问题描述

我有大小为700px（宽度）x 333px（高度）的图像，其宽高比为2.10。我希望在网格中显示这些图像。网格中每个元素的大小为327px（宽度）和183px（高度）宽高比1.77。原始图像可以裁剪或调整大小，每个元素的最小失真和最终宽高比应该是1.77并显示为327px（宽度）和183px（高度）。剪辑不起作用，因为它剪辑视图中的所有其他图像。还有，那里是另一个背景图像（如徽标），动态渲染新图像。所以 background-image：url（img-url）; 将不起作用

I have images of size 700px(width) x 333px(height) which have aspect ratio 2.10. I Want to display these images in a grid.The size of each element in the grid is 327px(width)and 183px(height) aspect ratio 1.77.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 1.77 and displayed as 327px(width)and 183px(height).clip doesn't work as it "clip"s all other images in the view.Also, there is another background image (like a logo) over which the new images are dynamically rendered.So background-image:url(img-url); won't work

如何通过CSS实现这一目标？

How to achieve this through CSS?

推荐答案

只需将其用作背景图像并根据需要调整大小：

Simply use it as a background image and resize it as you need :

div {
  width:327px;
  height:183px;
  background-image:url(https://lorempixel.com/700/333/);
  background-size:cover;
}

<div></div>

这篇关于如何裁剪/调整图像大小以使用CSS更改宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！