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

巴尔

我有一长篇用Angular构建的页面。页面上的图像是延迟加载的,因此只有src在图像滚动到视图中时才设置。

容器是灵活的,图像的缩放比例绝不能超过其尺寸(我知道并且可以在style属性上设置

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

TL; DR我想要<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

瑞安·米勒(Ryan Miller)

如果您提前知道每个图像的尺寸,我几乎总是建议您将普通图像<div>background-image属性结合使用。您不必顺应<img>标签的特质,仍然可以获得对动画.gifs的支持

我快速整理了一下Codepen,以给您一种感觉。我使用指令设置宽度和高度,并将其传递到隔离范围中,然后background-image在我检测到指令的顶部偏移量小于窗口高度时设置属性。快速,肮脏但简单的实现我想要的目标。

好处:

  • 前面提到的从处理曾经的罐头img标签中获得的延缓
  • 能够添加一些简洁的悬停效果(尝试将鼠标悬停在Codepen中的一只猫上)。

缺点:

  • 使用背景图像检测图像负载并不像使用img.onload可用于图像标签回调那样简单您可能会创建使用的指令模板,img以挤压该功能。由你决定。

希望这可以帮助!

编辑:正如克里斯在评论中提到的那样,当图像容器的宽度不同时,该技术仍无法解决纵横比问题。为了解决这个问题,我讲了我最喜欢的CSS技巧之一,使用padding-bottomNicolas Gallagher撰写的保持纵横比

不幸的是,我没有时间将修复程序添加到我的原始笔中(准备工作),但是我确实创建了该修复程序,以使用相同的图像显示实现所述padding-bottom元素的将比例缩放为的元件增加或减少的宽度,从而保持该元素的高宽比。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用PHP直接从URL调整图像大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

使用graphicsmagick或imagemagick调整大小而图像上没有空白

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用javascript调整图像大小

来自分类Dev

使用URL调整WordPress中图像的大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

如何使用Bootstrap调整图像大小

来自分类Dev

调整NSAttributedString中使用的图像的大小

来自分类Dev

使用位图调整大图像大小的OutOfMemoryException

来自分类Dev

使用createjs / easyljs调整图像大小

来自分类Dev

上传前使用画布调整图像大小

来自分类Dev

使用Pillow Python调整图像大小

来自分类Dev

使用AlamofireImage调整下载图像的大小

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用ImageMagick和CloudConvert调整图像大小

来自分类Dev

如何使用python下载调整大小的图像?

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

使用Shell脚本调整图像大小

来自分类Dev

使用GParted调整分区图像的大小?

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

如何使用libpng调整图像大小?

来自分类Dev

使用graphicsmagick或imagemagick调整大小而图像上没有空白

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用 javascript 调整图像大小

Related 相关文章

热门标签

归档