Facebook Image ..调整大小，裁剪和保持比率

Question

我试图做 Facebook卡 ...但是我迷失了图像，因为我没有任何想法如何创建图像......

我需要图像 1200x627 px ..做到这个响应并保持比率 1.91：1 .. 所以例如我有图像 1620x900 px所以我想调整它的大小，将其裁剪为 1200x627 px并对图像持有者做出响应。

我尝试了很多插件，但它们并没有像我想要的那样工作......

图像为1200x1200px

.card-content {max-width: 1200px; max-height: 627px;}
#content-img {width: 100%; max-height: 627px;}

<div class="row" id="card-content">
	<img id="content-img" src="images/galaxy.jpg">
</div>

网站示例：enter here

Answer 1

解决

好的，我通过计算比率为1.91的PADDING来解决这个问题（就像facebook图像卡一样）

如何计算：

  

  
• 如果您有图像，例如您需要的（对我来说：1200x627px）只是简单的方式：
  
• 需要比例为1：1.91所以：1/1.91 * 100 = 52.356 %
  
• 所以我设置了padding:52.356% 0 0 0，并且还有那个具有该比率的响应式图像
  
• 但请不要忘记这些：（我的整个样本）
  

.foo { display: block; width: 100%; height: auto; position: relative; overflow: hidden; padding: 52.356% 0 0 0; }
.foo img { display: block; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }