- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
作为CSS的新手,我还处于学习阶段,所以请多多包涵。我有一个完全用 CSS 构建的灯箱,我想生成比当前显示的更大的图像(灯箱内的图像,而不是主页上的缩略图),但想不出任何方法来实现这一点!
实时网站:http://contractoptions.com/gallery2.html
HTML:
<ul class="gallery">
<li>
<a href="#img1"><img src="thumb-01.jpg" alt="Image 1 Thumb"></a>
<article id="img1">
<figure>
<a href="#img2"><img src="img01.jpg" alt="Image 1"></a>
</figure>
<nav>
<a class="close" href="#close">Close</a>
<a class="arrow prev" href="#img25">Previous</a>
<a class="arrow next" href="#img2">Next</a>
</nav>
</article>
</li>
CSS:
/* ----- 图库页面 ----- */
.container {
width: 110%;
padding: 0 4%;
}
h1 {
font-weight: normal;
font-style: italic;
text-align: center;
margin: 5px 0 20px;
}
figure {
margin: 0;
height: 50%
}
ul {
list-style: none;
padding: 0;
}
a img {
border: none;
}
.gallery {
max-width: 700px;
padding: 15px;
background: #666;
border-radius: 10px;
margin: 0 auto;
border: 15px #98b277;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery:after {
content: "";
display: block;
clear: both;
}
.gallery li {
float: right;
width: 18%;
margin: 1%;
}
.gallery li > a {
float: right;
width: 100%;
-webkit-filter: grayscale(.5) sepia(.8);
-webkit-transition: .5s;
transition: .5s;
position: relative;
-webkit-transform: translateZ(0);
}
.gallery li > a img {
max-width: 100%;
float: right;
display: block;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-webkit-transition: .5s;
transition: .5s;
}
.gallery li > a:hover {
-webkit-filter: grayscale(0) sepia(0);
z-index: 1;
}
.gallery li > a img:hover {
-webkit-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
box-shadow: 0 0 15px rgba(0, 0, 0, .8);
}
.gallery article {
width: 0;
height: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.gallery article:target {
width: 100%;
height: 100%;
padding: 100px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
text-align: center;
background: rgba(0, 0, 0, .7);
z-index: 1000;
}
.gallery article figure {
height: 100%;
}
.gallery article img {
opacity: 0;
-webkit-transition: .7s;
transition: .7s;
border: 10px solid #fff;
max-height: 100%;
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
.gallery article:target img {
opacity: 1;
}
.gallery figcaption {
background: rgba(250, 250, 250, .1);
padding: 5px 10px;
font-size: 1.3em;
font-style: italic;
color: #999;
margin-top: 20px;
}
article .close {
position: absolute;
left: 50%;
top: 40px;
margin-left: -50px;
width: 100px;
background: rgba(250, 250, 250, .9);
color: #333;
border-radius: 15px;
text-decoration: none;
padding: 6px 6px 6px 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-transform: uppercase;
-webkit-transition: .5s;
transition: .5s;
}
article .close:before {
content: "X";
color: #fff;
font-family: Arial;
font-weight: bold;
position: absolute;
padding-top: 3px;
top: 3px;
left: 5px;
width: 24px;
height: 21px;
background: #666;
border-radius: 50%;
}
article .close:hover {
background: #fff;
}
article .arrow {
position: absolute;
top: 250px;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
text-indent: -9999px;
-webkit-transition: .4s;
transition: .4s;
}
article .prev {
left: 50%;
margin-left: -35%;
border-right: 60px solid rgba(250, 250, 250, .1);
}
article .prev:hover {
border-right-color: rgba(250, 250, 250, .2);
}
article .next {
right: 50%;
margin-right: -35%;
border-left: 60px solid rgba(250, 250, 250, .1);
}
article .next:hover {
border-left-color: rgba(250, 250, 250, .2);
}
@media screen and (max-width:1100px) {
article .arrow {
top: 36px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
article .prev {
margin-left: -130px;
border-right: 40px solid rgba(250, 250, 250, .3);
}
article .next {
margin-right: -130px;
border-left: 40px solid rgba(250, 250, 250, .3);
}
}
@media screen and (max-width:600px) {
h1 {
font-size: 1.4em;
}
.gallery li {
width: 23%;
}
}
@media screen and (max-width:450px) {
h1 {
font-size: 1.2em;
}
.gallery li {
width: 31%;
}
}
@media screen and (max-width:350px) {
h1 {
font-size: 1.2em;
}
.gallery li {
width: 48%;
}
}
最佳答案
我快速构建了一个 Codepen为你。我简单地插入了一些占位符图像,无论我使用什么尺寸的图像,它都不受你的 CSS 限制。我的建议?只需上传更大的图像。要摆弄我的设置,请像这样配置 placehold.it 图像:
<img src="http://placehold.it/200x200">
200x200
可以是您喜欢的任何尺寸。
编辑更新如下:
起初,我以为您想增加灯箱图片的尺寸。但现在我认为您可能在谈论图库中图像的大小,这些图像在您的 CSS 中受到以下声明的限制:
.gallery li > a img{
max-width: 100%;
}
因此,您图库中的图片将无法增长到超过其父级宽度的 100%。
关于css - 在 CSS 灯箱中放大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25859635/
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
如何在放大的每个图像下添加自定义文本?现在它基于 alt 文本,但我想使用图像等对其进行更多自定义。 完美的解决方案是将文本显示在 div 中。 这是代码笔: // Create a lightbox
为了重新启动我的客户站点 (craft2eu.net),我需要集成 Galleriffic用lightBox .我知道有 GallerificPlus ,但它基于旧版本的 Galleriffic,它带
设计一个网站,其中我在很多地方使用了很多背景:rgba。因此,当我尝试制作一个灯箱时,我正在使用 background: rgba(0, 0, 0 , 0.6) !important; 使屏幕的其余部
晚上好,感谢您首先尝试提供帮助。 我有一个“作品集”页面,其中包含 45 张我 build 的房屋的图片。它们被布置在一个网格中,5 宽 9 向下。简单地说,当您在浏览器中单击并展开图像时,效果很好。
我试图允许从灯箱弹出窗口填写表格。类似于“获得满意度”使用的那种(尽管我只需要能够收集信息,而不是从查询中显示信息)。您可以在 http://tweet.fabeetle.com 处查看“获得满意”示
我正在尝试使用这个灯箱, http://lokeshdhakar.com/projects/lightbox2/#getting-started in my app. 1) How can I ad
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
有谁知道一个好的 Rails 灯箱插件?我找到了 redbox,但它似乎已经过时了。 谢谢! -艾略特 最佳答案 我只使用常规的 Lightbox 2。包括所有适当的 javascript 和样式表,
我正在使用 bootstrap-lightbox以便在页面中显示某些图像。 × 我只需要显示被点击的缩略图的完整版本。 是
我目前正在使用 prettyPhoto在我正在开发的网站上,但在移动设备上遇到了一个小问题。 该插件具有选项“allow_resize: false”,它不允许调整大于视口(viewport)的照片大
我正在使用jquery lightbox ,有没有办法显示文本字段而不是图像或两者都显示? 或者也许是另一种在灯箱弹出窗口中显示文本的方式? 最佳答案 这是灯箱的最佳示例视频 https://www.
我对 Jquery 很陌生,我发现了几个使用 cookie 和 onload 功能打开灯箱的示例。我正在使用与 fancybox 一起使用的 cookie 示例,但我一直在我的所有网站上使用 Pret
我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激,因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像,这样当我单击每个图像时,此灯箱效果将适用
首先,我将从以下内容开始:我绝不是一名开发人员、编码员等。我只是一名平面设计师,正在帮助 friend 设计她的网站。 截至目前,我在将缩略图链接到我的灯箱标注上的完整图像时遇到问题 - 您可以在 w
我肯定遇到了一个简单的问题,但就是无法解决。我想按照描述使用 jquery 触发灯箱 here但这是行不通的。.lightBox() 方法找不到,我只是不明白为什么。 代码是 $(f
我在 Lightbox iframe 中有一个按钮。如何通过单击该按钮关闭该 iframe? 我的代码是这样的: 最佳答案 通过this answer至 Close a ligh
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在使用 angular 来显示我的 Student Object 的详细信息 一切正常 但还需要作业文本上的超链接,这样当有人点击它时,会打开一个灯箱,其中包含所有作业对象的详细信息。 现在我的老
我是一名优秀的程序员,十分优秀!