当您在Firefox中打开图像时,它具有以下特征:
- 居中显示
- 将包含一个高度/宽度(不超过浏览器尺寸)。
- 不调整大小大于其最大大小。
- 如果小于浏览器窗口,则不调整大小。
- 保留长宽比。
- 有一个缩放工具,可以将图像调整到最大尺寸,并允许它超过浏览器尺寸。
我如何使用CSS/JS复制这个?我尝试了几种不同的方法使用CSS,但我假设它需要JS,我找不到任何例子。
我使用过的最好的结果是:
height: 100%;
width: 100%;
background-url: {location of image}
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
但是这只会对较大的图像产生很好的结果,因为它会拉伸较小的图像以匹配浏览器的高度或宽度,而不是我希望小于浏览器的图像只是居中并保留其最大高度/宽度
jsBin演示
(免责声明:仅限现代浏览器:(IE9+))
你只需要:
<div id="parent">
<img src="image.jpg">
</div>
CSS: html,
body{
margin:0;
height:100%;
background:url(http://i.imgur.com/aSqDLP0.png);
}
body{ /* or use a wrapper element instead */
display: table;
width: 100%;
text-align: center;
}
#parent{
display: table-cell;
vertical-align: middle;
}
#parent img{
vertical-align: middle;
max-height: 100vh;
max-width: 100vw;
box-shadow: 0 4px 15px #111;
}
以上内容对于居中和调整大小已经足够了
如果你还想做和Firefox完全一样的事情:
- 放大光标悬停-如果图像被浏览器调整(小)
- 滚动窗口到点击的坐标 -如果图像很小
- 缩放光标 -如果图像被缩放(点击)-显示
-
比一点jQuery可能会派上用场:
var $parent = $("#parent"),
isParentSmaller = false,
zoom = false,
parW, parH,
imgW, imgH;
$parent.find("img").on("mouseenter click", function( e ){
imgW = this.naturalWidth;
imgH = this.naturalHeight;
parW = $parent.width();
parH = $parent.height();
isParentSmaller = parW-1 < imgW || parH-1 < imgH;
$(this).css({
cursor: isParentSmaller ? (zoom?"zoom-out":"zoom-in") : "auto"
});
if(e.type=="click" && isParentSmaller){
zoom = !zoom; // Toggle zoom boolean
$(this).css({ // Apply cursor styles
maxWidth : zoom ? "none" : "100vw",
maxHeight : zoom ? "none" : "100vh",
cursor : zoom ? "zoom-out":"zoom-in"
});
// Scroll window where we want to zoom:
window.scrollTo(((imgW/parW)-1)*e.clientX, ((imgH/parH)-1)*e.clientY);
}
});
谦虚时间,以上表现甚至比Firefox更好,因为如果您调整窗口大小,Firefox会失去放大镜光标:)
注意:我重写了我的答案,因为我之前的解决方案无法在Firefox中工作(哦,讽刺的是)。它还会在其他浏览器中造成奇怪的行为。原因是为了使图像垂直和水平居中
让我们一步一步来。
为了在设置最大尺寸的同时保持图像的长宽比,可以使用以下命令:
.img {
display: block; // could also be inline-block or other block-like types
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
现在,元素的垂直和水平居中技术上是3行代码flexbox。如上所述,这在某些浏览器中缩放图像时会导致奇怪的行为。相反,我们使用text-align: center
将图像沿x轴居中,并使用一种称为"Ghost Element"的方法将图像沿y轴居中。您可以在本文CSS Tricks中了解更多有关它的信息。总之,我们有这个来居中元素:
.parent {
text-align: center;
white-space: nowrap;
}
.parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.centered-child {
display: inline-block;
vertical-align: middle;
}
最后,我们将缩放和定心结合起来。我假设HTML在正文中只存在一个<img class="img" ...>
。
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
text-align: center;
}
body:before {
content: '';
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
margin-left: -0.25em;
}
.img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
现在我们实现缩放为了缩放图像,我们需要JavaScript。让我们使用jQuery。
在JavaScript中更改css属性是不太好的,所以我们准备了两个额外的类。
.img.is-zoomable {
cursor: zoom-in;
}
.img.is-zoomed {
cursor: zoom-out;
max-height: none;
max-width: none;
}
点击JavaScript将切换is-zoomed
类,点击鼠标进入,我们决定图像是否可以缩放。如果它可以缩放,我们添加类is-zoomable
。
$('.img').on('click', function() {
$(this).toggleClass('is-zoomed');
});
$('.img').on('mouseenter', function() {
var origWidth = this.naturalWidth;
var origHeight = this.naturalHeight;
var currWidth = $(this).width();
var currHeight = $(this).height();
if (origWidth !== currWidth || origHeight !== currHeight) {
$(this).addClass('is-zoomable');
}
});
好了,我们做完了。有关工作示例,请参阅我的codepen。