Mam obraz, który chciałbym skalować do pełnego ekranu. Jak zrobiłbym to za pomocą JavaScript / jQuery? Nie jest konieczna animacja, zmieniaj rozmiar obrazu.

<img src="something.jpg" onload="scaleToFullScreen()" />
6
Andrew 17 listopad 2011, 00:11

3 odpowiedzi

Najlepsza odpowiedź

Jedynym niezawodnym rozwiązaniem jest użycie a Formuła do określenia stosunku maksymalnego skali:

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
});
8
Community 23 maj 2017, 12:01

Jeśli masz na zewnątrz wszystkich elementów, możesz użyć CSS: <img src="something.jpg" style="width:100%; height:100%" onload="scaleToFullScreen()" />

Jeśli nie:

<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>
1
locrizak 16 listopad 2011, 20:31

Możesz użyć viewerjs, który jest biblioteką perfekcyjną, aby umożliwiający użytkownikom przeglądali obrazy do przeglądania FullPage i FullsCreen, przesuń je i przeglądaj zjeżdżalnią między nimi Sprawdź ten link: https://github.com/fengyuanchen/viewerjs

0
Khaled AbuShqear 18 lipiec 2018, 00:21