作为 <img> 元素的响应式图像答案

【问题标题】：An image thats responsive but square as an <img> element作为 <img> 元素的响应式图像
【发布时间】：2016-10-20 02:03:50
【问题描述】：

我正在使用 Ionic 1.x 和 Angular 1.x，我显示的头像图像通常是方形的，但并非总是如此，我希望它是全宽的，然后是方形的，所以如果屏幕是 720 像素宽，我想要一个 720px 高和宽的图片，如果图片大于这个尺寸，它应该隐藏多余的部分（最好以一种聪明的方式）。

我只包含了 ionic 样式和我自己的一些样式，因此本项目中不包含 bootstrap。

我很乐意将宽度：100% 的类应用于图像，高度：自动，但高度不应大于宽度。

如前所述，它需要响应，因为它将显示在各种屏幕尺寸上，所以我不会总是知道要设置尺寸的图像......我可以使用一些 JS 手动计算和设置尺寸，但这不是有点笨拙吗？

我查找了指令，但没有找到。

【问题讨论】：

background-size: cover 是一种选择。

标签： css angularjs ionic-framework

【解决方案1】：

一种方法是创建一个响应式方形元素，然后使用 CSS 背景图像而不是 HTML img src：

您可以使用height: 0、width: x% 和padding-bottom: y%（或padding-top）制作任何给定aspect ratio 的响应元素，其中x/y 是纵横比. （这是因为percentage padding is relative to width）。在您的情况下，要制作全角正方形，请使用 height: 0; width: 100%; padding-bottom: 100%;。
因为您使用的是<img>，所以您会得到一个无法使用 CSS 删除的“缺失图像”轮廓。通过使用单个透明像素作为您的 src 图像来解决这个问题。 Base64编码，就是 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"（thanks to Chris Coyier省了我们自己制作的麻烦）
现在将您的图像添加为内联 background-image。以background-position: center 居中，并使用background-size: cover 进行缩放以适应<img>。您可以在一个 CSS 属性中使用background shorthand 来表示，使用background: position/size。

这一切都在一起。我使用包装器元素只是为了使内容适合 sn-p 结果窗口；第二张图片演示成功地将非正方形图像变成正方形。

img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: no-repeat center/cover;
}
#wrapper-for-demo {
  width: 200px;
}

<div id="wrapper-for-demo"><!-- just to fit nicely in the stacksnippets results window -->
  
  <!-- an image with a square source -->
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url(http://placehold.it/400x400)" />
  
  <!-- an image with a non-square source -->
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url(http://placehold.it/400x600)" />
  
</div>

【讨论】：