【问题标题】: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: 0width: x%padding-bottom: y%(或padding-top)制作任何给定aspect ratio 的响应元素,其中x/y 是纵横比. (这是因为percentage padding is relative to width)。在您的情况下,要制作全角正方形,请使用 height: 0; width: 100%; padding-bottom: 100%;

  • 因为您使用的是&lt;img&gt;,所以您会得到一个无法使用 CSS 删除的“缺失图像”轮廓。通过使用单个透明像素作为您的 src 图像来解决这个问题。 Base64编码,就是 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"thanks to Chris Coyier省了我们自己制作的麻烦)

  • 现在将您的图像添加为内联 background-image。以background-position: center 居中,并使用background-size: cover 进行缩放以适应&lt;img&gt;。您可以在一个 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>

【讨论】:

    猜你喜欢
    • 2018-12-20
    • 1970-01-01
    • 2016-05-10
    • 2014-11-07
    • 1970-01-01
    • 2018-06-26
    • 1970-01-01
    • 1970-01-01
    • 2015-04-29
    相关资源
    最近更新 更多