更改图像的纵横比而不进行裁剪

Question

我在使用laravel上的干预图像时遇到与图像处理有关的麻烦。问题是：我必须改变图像的纵横比，但是，按照我目前的方式，我要裁剪图像来完成它，并且这个元素中的重要事情也被裁剪掉了。所以，我想知道，是否可以在图像上添加边框来创建宽高比？如果你们都能帮助我，我会非常高兴的。

P.S。抱歉我的英语，我还在学习，哈哈。

Answer 1

解决方案1 ​​

创建具有正确宽高比/尺寸的div，并将图像加载为background-size: contain的背景图像。

＆＃13;

＆＃13;

div {width: 300px; max-width: 100%;}
div > div {
  width: 100%; 
  padding-bottom: 60%; /* use this for the aspect ratio */
  background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
  background-size: contain;
}

＆＃13;

<div><div></div></div>

＆＃13;

＆＃13;

＆＃13;

工作演示：https://codepen.io/anon/pen/ooBaKe

如何运作

填充底部为此div创建高度（因为它没有内容）。填充底部百分比是父级宽度的百分比。因此，2：1比率的图像具有50％的填充底部。 3：2比例图像的填充底部为66.66％。

为什么会这样？

此div内的div的宽度为100％。这是300px，因为子div受其父级约束。填充底部百分比是相对于包含块，而不是（正如许多人认为的）身体。这里包含的块是最近的块级祖先，它是父元素。请注意，如果我们只使用一个固定宽度为300px的div，它将相对于主体。

为什么这个解决方案并不完美

此解决方案完全响应，因为包含div的最大宽度为100％。如果您改变主意并希望裁剪图像而不是包含图像，则只需将背景大小更改为“覆盖”即可。因此，这似乎是一个很好的解决方案但是，背景图像不是一个合适的图像，因为它没有＆＃39; alt＆＃39;文本并缺少DOM表示，导致各种可访问性问题。

解决方案2

创建具有正确宽高比/尺寸的div，并将图像加载为具有max-width和max-height的img标签。

HTML

＆＃13;

＆＃13;

div {
  width: 300px; 
  max-width: 100%; 
  position: relative;
}
div > div {
  width: 100%; 
  padding-bottom: 110%; /* use this for the aspect ratio */
  background: black;
}
div > div > img {
  max-width: 100%; 
  max-height: 100%; 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div>
  <div>
    <img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

工作演示：https://codepen.io/anon/pen/yPgQKJ

关于此解决方案

它的工作方式与前一个大致相同，但此解决方案在语义上是正确的。这里的区别在于图像元素在内部div中是绝对的。它的位置是绝对的，但相对于其父级，左边界的50％和顶部的50％。然后使用CSS的translate函数校正图像放置的宽度和高度（否则其左上角将位于其父级的中间）。由于仅使用了最大宽度和最大高度（而不是宽度和高度），因此图像保持响应并保持其纵横比。