使用空白来源调整图像大小

Question

我有一个很长的页面,用Angular构建.页面上的图像是延迟加载的,因此src在图像滚动到视图之前不会设置.

容器是灵活的,图像的尺寸永远不应大于它们的尺寸(我知道并且可以在style属性上设置)

现在我在没有设置源的情况下正确缩放图像时遇到问题.

TL; DR 我想要<img src='pic.jpg'/>并且<img src=''/>在最大尺寸的柔性容器内占据相同数量的空间.

演示:http://codepen.io/chrismbarr/pen/xGgGRq？ edit = 110

---

HTML(这将从JavaScript生成,我们提前了解维度)

<div class="container" style='max-width: 500px; max-height: 700px;'>
  Image with a source
  <img src="http://lorempixel.com/500/700/cats/2/" />
</div>

<div class="container" style='max-width: 500px; max-height: 700px;'>
  Image with no source
  <img src="" />
</div>

CSS

img{
  display:block;
  max-width: 100%;
}  

img[src=''],
img:not([src]){
  //no image source
  height: 100%;
  width: 100%;
}

这是一个难以设置图像尺寸的演示,因此它们不再灵活.这是我想要避免的:http://codepen.io/chrismbarr/pen/JdEYMe

Answer 1

如果您提前知道每个图像的尺寸，我几乎总是建议将普通 ol'<div>和background-image属性结合起来。您不必迎合标签的特性<img>，并且仍然可以获得对动画 .gif 的支持。

我快速编写了一个 Codepen，让您感受一下。我使用指令来设置宽度和高度，将其传递到隔离范围中，然后background-image在检测到指令顶部偏移量小于窗口的高度时设置属性。快速、肮脏但简单地实现了我认为你想要的。

优点：

• 上述的暂缓处理永远脾气暴躁的img标签。
• 能够添加一些简洁的悬停效果（尝试悬停在 Codepen 中的一只猫上）。

缺点：

• 使用背景图像检测图像加载并不像使用img.onload图像标签可用的回调那么容易。您可能会创建使用 a 的指令模板img来挤出此功能。由你决定。

希望这可以帮助！

编辑：正如克里斯在评论中提到的，当图像容器的宽度不同时，这种技术仍然不能解决宽高比问题。为了解决这个问题，我想出了我最喜欢的 CSS 技巧之一，用 保持纵横比padding-bottom，由 Nicolas Gallagher 撰写。

虽然不幸的是我没有时间将修复添加到我原来的笔中（准备工作），但我确实创建了这个来展示使用相同图像的实现。元素padding-bottom的宽度将随着元素宽度的增加或减少而按比例缩放，从而保持元素的纵横比。