- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想在我的页面上显示多个图像,并满足以下要求:
他们的高度都合适
它们都在一条线上,必要时按宽度裁剪
有反射(reflection)就好了
我使用 background-image
让它工作, 以及以下结构:
<!-- row images -->
<div class="row-fluid">
<div class="span12" id="cover_pictures">
<div class="images1">
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div> </div>
</div>
<!-- row for reflections, php generated -->
<div class="row-fluid">
<div class="span12 hidden-phone" id="cover_reflections">
<div class="images1">
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="images2" style="background-image: url('http://myserver/reflect.php?http://i.imgur.com/OEy0D1X.jpg');"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
以及以下 CSS:
#cover_pictures .images1 {
height:350px;
}
#cover_reflections .images1 {
height:100px;
}
.images1 {
width:100%;
}
.images2 {
/* top for reflections, doesnt matter for pictures*/
background-position:center top;
background-repeat:no-repeat;
background-size:auto 100%;
float:left;
height:100%;
overflow: hidden;
margin:0px 0%;
}
使用此 JS 调整大小 .images2
分区:
var l = dataJson.length; // number of images
var margTot = 5; // 5% of the space for margins
$(".images2").css("margin-left", margTot / 2 / l + "%");
$(".images2").css("margin-right", margTot / 2 / l + "%");
$(".images2").css("width", (100 - margTot)/l + "%");
问题是:从 PHP 加载反射非常慢,生成的图像太大,所以我想使用 Reflection.js。此脚本仅适用于 <img />
, 不适用于 background-image
, 但我似乎无法使用 <img />
进行相同的布局元素。图像失真,如果不是,它们只适合宽度等等。
我不是 html/css 方面的专家,所以对你们中的一些人来说这似乎很容易,但请确保任何答案都将不胜感激!如果您需要更多详细信息,请随意询问,我可能忘记了一些。
如果我能让它轻松工作,我计划将它作为 jQuery 插件发布在 GitHub 上。
编辑:图像列表中填充了一个 JSON API,为我提供了图像的 URL 和大小。我无法调整服务器上图片的大小,因为网页上的图片数量各不相同。
编辑:致 future 的读者:我想奖励关于这个问题的两个很好的答案,所以我做了以下
我将赏金授予了 Troy Alfrod,因为他的回答非常详细且好看
我验证了 Vals 的解决方案,因为它的设置简单
对于我自己的场景,我决定暂时使用最简单的答案,因为实现和测试的延迟非常短。这是我所做的:
两者 #cover_pictures > .images2
和 #cover_reflections > .images2
包含具有相同 background-image
的相同 div , 和相同的样式(不再是 reflect.php
)
已添加 transform: scaleY(-1);
(以及其他浏览器的等效项)到 #cover_reflections > .images2
限制了 #cover_reflections
的大小至 100px
添加了 .mask
建议使用 div Vals。
它工作得很好,除了在 IE7-8 中,因为它不支持 background-size
属性(property)。所以我在 php 中添加了一个后端,以正确的高度发送每个图像(支持缓存等)。那不是计划的一部分,但我不得不这样做。这样检索所需的高度 var height = $('#cover_pictures .images1').height();
希望对其他人有帮助!!
设置时我会在这里发布 jQuery 插件的链接。
最佳答案
我已经为您制作了一个演示,具有简化的布局,但我认为这个想法还可以:
HTML 是:
<div class="row-fluid">
<div class="span12" id="cover_pictures">
<div class="images1">
<div class="images2" id="img1"></div>
<div class="images2" id="img2"></div>
<div class="clearfix"></div>
</div> </div>
</div>
<div class="row-fluid">
<div class="span12" id="cover_reflections">
<div class="ref1">
<div class="ref2" id="img1"></div>
<div class="ref2" id="img2"></div>
<div class="mask"></div>
</div> </div>
</div>
与您已有的差别不大。
我在反射行中添加了一个 mask div,以产生阴影效果。
CSS 是
#cover_pictures .images1 {
height:350px;
}
#cover_reflections .ref1 {
height:100px;
}
.images1, .ref1 {
width:100%;
}
#img1 {
width: 200px;
background-image: url(http://placekitten.com/200/300);
}
#img2 {
width: 250px;
background-image: url('http://placekitten.com/250/300');
}
.images2, .ref2 {
background-repeat:no-repeat;
float:left;
height:100%;
overflow: hidden;
margin:0px 0%;
}
.images2 {
background-position:center top;
background-size:auto 100%;
}
.ref2 {
background-position:center bottom;
}
#cover_reflections .ref1 {
-webkit-transform: scaleY(-0.9);
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background-image: -webkit-gradient( linear, center bottom, center top, color-stop(0.1, rgba(255, 255, 255, 0.2)), color-stop(0.95, rgba(255, 255, 255, 0.9)));
}
几乎是一样的;我已将背景图片从 HTML 更改为 CSS。
关键是反射的 scaleY 负值(遵循 bwoebi 想法)。我设置的比 1 小一点,看起来更像是反射,但这取决于您。
一些属性必须改变才能正常工作,例如位置必须在底部。
最后,使用缩放的蒙版 div 覆盖所有 ref1 div,渐变从透明到白色。
我没有包含 JavaScript,并手动修复了尺寸,但您可以按照您已经做过的那样来做。
编辑:增加了透明度和一些模糊度(仅在 webkit 中可用)。添加了一个 div 以检查透明度。
变化在这里
#cover_reflections .ref1 {
-webkit-transform: scaleY(-1);
opacity: 0.65;
-webkit-filter: blur(1px);
}
我认为你说的尺寸变化引起的问题与之前的scaleY(-0.9)有关,我认为现在表现正常。关于它的响应性,只是我没有在我的代码中包含您的 Javascript,因为我认为这不是重点,但它应该可以正常工作,没有问题
关于html - 定位、裁剪并向图像、网络添加反射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16763677/
一、反射 1.定义 Java的反射(reflection)机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法(即使是私有的);对于任意一个对象,都能够调用它的任意方法和属性,那么,我
有没有办法从 JavaScript 对象内部获取所有方法(私有(private)、特权或公共(public))?这是示例对象: var Test = function() { // private m
我有一个抽象类“A”,类“B”和“C”扩展了 A。我想在运行时根据某些变量创建这些实例。如下所示: public abstract class A { public abstract int
假设我们在内存中有很多对象。每个都有一个不同的ID。如何迭代内存以找到与某些 id 进行比较的特定对象?为了通过 getattr 获取并使用它? 最佳答案 您应该维护这些对象的集合,因为它们是在类属性
假设我有这个结构和一个方法: package main import ( "fmt" "reflect" ) type MyStruct struct { } func (a *MyS
C#反射简介 反射(Reflection)是C#语言中一种非常有用的机制,它可以在运行时动态获取对象的类型信息并且进行相应的操作。 反射是一种在.NET Framework中广
概述 反射(Reflection)机制是指在运行时动态地获取类的信息以及操作类的成员(字段、方法、构造函数等)的能力。通过反射,我们可以在编译时期未知具体类型的情况下,通过运行时的动态
先来看一段魔法吧 public class Test { private static void changeStrValue(String str, char[] value) {
结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套; go中的struct类型理解为类,可以定义方法,和函数定义有些许区别; struct类型是值类型
反射 1. 反射的定义 Java的反射(reflection)机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性,既然能拿到那么,我们
反射的定义 java的反射(reflection) 机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性,既然能拿到嘛,那么,我们就可以
我有一个 Java POJO: public class Event { private String id; private String name; private Lon
我编写了以下函数来检查给定的单例类是否实现了特征。 /** Given a singleton class, returns singleton object if cls implements T.
我正在研究 Java 反射的基础知识并观察有关类方法的信息。我需要获得一个符合 getMethod() 函数描述的规范的方法。然而,当我这样做时,我得到了一个 NoSuchMethodExceptio
我正在通过以下代码检索 IEnumerable 属性列表: BindingFlags bindingFlag = BindingFlags.Instance | BindingFlags.Public
我需要检查属性是否在其伙伴类中定义了特定属性: [MetadataType(typeof(Metadata))] public sealed partial class Address { p
我正在尝试使用 Reflections(由 org.reflections 提供)来处理一些繁重的工作,因此我不需要在很长的时间内为每个类手动创建一个实例列表。但是,Reflections 并未按照我
scala 反射 API (2.10) 是否提供更简单的方法来搜索加载的类并将列表过滤到实现定义特征的特定类? IE; trait Widget { def turn(): Int } class
我想在运行时使用反射来查找具有给定注释的所有类,但是我不知道如何在 Scala 中这样做。然后我想获取注释的值并动态实例化每个映射到关联注释值的带注释类的实例。 这是我想要做的: package pr
这超出了我的头脑,有人可以更好地向我解释吗? http://mathworld.wolfram.com/Reflection.html 我正在制作一个 2d 突破格斗游戏,所以我需要球能够在它击中墙壁
我是一名优秀的程序员,十分优秀!