Question

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

容器非常灵活，图像的尺寸不应超过尺寸（我知道并且可以在style属性上设置）

现在我在没有设定来源的情况下获取图像时遇到问题。

TL; DR 我希望<img src='pic.jpg'/>和<img src=''/>在最大尺寸的灵活容器中占用相同数量的空间。

DEMO：http://codepen.io/chrismbarr/pen/xGgGRq?editors=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

如果您提前了解每张图片的尺寸，我几乎总是会推荐一个简单的组合。 <div>和background-image属性。您不必专注于<img>标记和still get support for animated .gifs的特性。

I whipped up this quick Codepen给你一种感觉。我使用一个指令设置宽度和高度，它们被传递到隔离范围，然后在我检测到指令顶部偏移量小于窗口高度时设置background-image属性。快速，肮脏，但简单的实现我认为你想要的。

优点：

前面提到的处理永久性img标签的缓解。
能够添加一些整洁的悬停效果（尝试将鼠标悬停在Codepen中的一只猫上）。

缺点：

使用背景图像检测图像负载并不像使用可用于图像标记的img.onload回调一样简单。您可能会创建使用img来挤出此功能的指令模板。由你决定。

希望这有帮助！

编辑：正如Chris在评论中提到的，当图像容器的宽度不同时，这种技术仍然没有解决宽高比问题。为了解决这个问题，我得出了一个我最喜欢的CSS技巧，maintaining aspect ratio with padding-bottom，由Nicolas Gallagher撰写。

虽然遗憾的是我没有时间将修补程序添加到我原来的笔中（前往工作），I did create this to show an implementation using the same images。元素的padding-bottom将按元素的宽度增加或减少的比例缩放，从而保持元素的宽高比。

Answer 2

你做的很简单

    <img src="img.jpg" width"20px" height"20px"/>

或任意数量的像素，并与其他像素一样

    <img src="" width"20px" height"20px"/>

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

2 个答案: