Question

我正在使用Ionic 1.x和Angular 1.x，我显示的是通常为方形但不总是的头像图像，我希望它是全宽，然后是正方形，所以如果屏幕是720px宽，我想要720px高和宽的图像，如果图像大于这个尺寸，它应该隐藏多余的（理想情况下以智能方式）。

我只包含了离子样式和我自己的一些样式，所以这个项目中不包含bootstrap。

我很乐意将宽度为100％的类应用于图像，高度为auto：但高度不应超过宽度。

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

我查看了指令但却找不到。

Answer 1

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

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

这一切都在一起。我正在使用一个包装元素，只是为了让事情适合在片段结果窗口中;第二个图像演示成功地将非方形图像转换为正方形。

background: position/size

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