Question

我有一个想要扩展到全屏的图像。我如何使用JavaScript / jQuery做到这一点？不需要动画，只需调整图像大小。

<img src="something.jpg" onload="scaleToFullScreen()" />

Answer 1

唯一可靠的解决方案是使用formula to determine maximum scale ratio：

var $img = $('#content img'),
    imageWidth = $img[0].width, //need the raw width due to a jquery bug that affects chrome
    imageHeight = $img[0].height, //need the raw height due to a jquery bug that affects chrome
    maxWidth = $(window).width(),
    maxHeight = $(window).height(),
    widthRatio = maxWidth / imageWidth,
    heightRatio = maxHeight / imageHeight;

var ratio = widthRatio; //default to the width ratio until proven wrong

if (widthRatio * imageHeight > maxHeight) {
    ratio = heightRatio;
}

//now resize the image relative to the ratio
$img.attr('width', imageWidth * ratio)
    .attr('height', imageHeight * ratio);

//and center the image vertically and horizontally
$img.css({
    margin: 'auto',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
});

Answer 2

如果你在所有元素之外，你可以使用css： <img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />

如果你不这样做：

<img name='myImage' src="something.jpg" onload="onResize()" />
<script>
window.onresize = onResize;

function onResize(e){
    var img = var img = document.images.myImage;
    if ( img.width > img.height )
        img.width = window.innerWidth
    else
        img.height = window.innerHeight;
}
</script>

Answer 3

您可以使用ID Event Date Date2 1: A 0 2015-01-01 2015-05-01 2: A 0 2015-02-01 2015-05-01 3: A 1 2015-03-31 2015-05-01 4: B 0 2016-02-28 2016-04-30 5: B 0 2016-03-30 2016-04-30 6: B 0 2016-04-30 2016-04-30 7: C 0 2015-01-01 2015-01-01这是一个完善的库，使用户能够浏览您的图像以查看全页和全屏，滑动和查看它们之间的幻灯片检查此链接： https://github.com/fengyuanchen/viewerjs

如何使用JavaScript将图像缩放到全屏？

3 个答案: