如何使用灯箱显示图像的缩放尺寸
How can display scaled dimension of an image using lightbox?
我使用灯箱控件(http://leandrovieira.com/projects/jquery/lightbox/)以显示图像。但是控件总是显示全维图像,如果我希望显示图像的半维,该怎么办?谢谢
/* line 7, ../sass/lightbox.sass */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
/* line 20, ../sass/lightbox.sass */
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
display: block;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
border: none;
}
/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
/* line 44, ../sass/lightbox.sass */
.lb-container {
padding: 4px;
}
/* line 47, ../sass/lightbox.sass */
.lb-loader {
position: absolute;
top: 43%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
/* line 56, ../sass/lightbox.sass */
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}
/* line 63, ../sass/lightbox.sass */
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
left: 0;
}
/* line 74, ../sass/lightbox.sass */
.lb-nav a {
outline: none;
}
/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
width: 49%;
height: 100%;
cursor: pointer;
/* Trick IE into showing hover */
display: block;
}
/* line 84, ../sass/lightbox.sass */
.lb-prev {
left: 0;
float: left;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(../img/prev.png) left 48% no-repeat;
}
/* line 90, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
background: url(../img/next.png) right 48% no-repeat;
}
/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
/* line 103, ../sass/lightbox.sass */
.lb-data {
padding: 0 4px;
color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
您发布的代码是从sass编译的。要更改灯箱图像的宽度,您必须找到控制模式容器宽度的声明,它看起来可能是:
.lightbox .lb-image {
width: 50%; /* reduce the image width to half of its original x dimension */
height: auto; /* keep height set to auto, otherwise you might distort the image */
}
如果看不到HTML,就很难判断.lb-image
类的目标是img
还是它的容器。在后者的情况下,height: auto
声明应该是不必要的。
应对源(未编译)sass文件../sass/lightbox.sass
进行此更改然后,您必须重新编译sass以获得随后应用于页面的输出。
有关sass和scs的更多信息,请访问他们的网站http://sass-lang.com/
相关文章:
- 自动缩放图像以匹配文本高度
- 使用-webkit transform:scale()缩放图像
- 缩放图像灯箱
- 保持可缩放图像的纵横比
- 使用 HTML 输出标记查看可缩放图像并分配 src
- 使用弹性框和缩放图像并保持在同一行上
- 查找图像上两点之间的距离,即使缩放图像也是如此
- 当只给定宽度或高度时,是否所有浏览器都按比例缩放图像
- 获取缩放图像的尺寸
- 从输入[类型=文件]缩放图像
- 如何防止 javascript drawImage() 缩放图像
- HTML 画布:缩放图像以适合而不拉伸
- 缩放图像,而不是在调整浏览器窗口大小时环绕图像
- 从中心缩放图像(fabricjs)
- 使用 CSS 在 HTML 中缩放图像
- jQuery SpriteSpin 缩放图像
- 如何更改数据缩放图像值
- 使用 jquery 悬停时缩放图像
- 使用鼠标向下拖动以缩放图像缩略图
- 我如何创建鼠标滚轮可缩放图像