html - 使用空白源调整图像大小

Question

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

容器是灵活的，图像的缩放比例永远不会超过它们的尺寸(我知道并且可以在 style 属性上设置)

现在我在获取没有设置源的图像以正确缩放时遇到问题。

长话短说 我要<img src='pic.jpg'/>和 <img src=''/>在具有最大尺寸的柔性容器内占据完全相同的空间量。

演示: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

如果您提前知道每张图片的尺寸，我几乎总是推荐普通 ol' <div> 的组合。和 background-image属性(property)。您不必迎合 <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元素的宽度将随着元素宽度的增加或减少而按比例缩放，从而保持元素的纵横比。