首页 文章

如何裁剪/调整图像大小以使用CSS更改宽高比

提问于
浏览 次
-3

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

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

javascript html css html5 sass

2 回答

  • -1

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

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

    <div></div>
    回复于
  • 2

    方面是比率不太正确183 * 1.777 = 325.191

    333/183 = 0.5495 //比例因子 - 如此裁剪宽度

    700 * .549 = 384

    384-325 = 59

    左右收缩30px约

    CSS

    div.myimage{
     width: 325px;
     height:183px; 
     }
div.myimage img{ 
       width: 385px;
       height: 183px;
       marginLeft: -30px
       marginRight: -30px;
    }
    回复于

相关问题