Image Javascript Redimensionner

est-ce que quelqu'un sait comment redimensionner les images proportionnellement en utilisant JavaScript?

j'ai essayé de modifier le DOM en ajoutant les attributs height et width à la volée, mais semble ne pas fonctionner sur IE6.

42
demandé sur Adriano 2008-10-04 20:39:31

13 réponses

pour modifier une image proportionnellement, il suffit de modifier une seule des propriétés CSS largeur/hauteur, laissez l'autre paramétrée à auto.

image.style.width = '50%'
image.style.height = 'auto'

cela permettra de s'assurer que son format reste le même.

gardez à l'esprit que les navigateurs ont tendance à sucer à redimensionner les images bien - vous trouverez probablement que votre image redimensionnée semble horrible.

64
répondu Dan 2008-10-04 16:47:26

OK, c'est résolu, voici mon code final

if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}

Merci les gars

18
répondu Komang 2008-10-04 17:15:22

au lieu de modifier les attributs hauteur et largeur de l'image, essayez de modifier la hauteur et la largeur CSS.

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

un "gotcha" commun est que les styles de hauteur et de largeur sont des cordes qui comprennent une unité, comme "px" dans l'exemple ci-dessus.

Edit-je pense que le réglage de la hauteur et la largeur directement au lieu d'utiliser le style.de la hauteur et du style.largeur de travail. Elle aurait aussi l'avantage d'avoir déjà l'original dimension. Pouvez-vous poster un peu de votre code? Etes-vous sûr que vous êtes en mode standard plutôt qu'en mode bizarreries?

cela devrait fonctionner:

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
6
répondu Neall 2008-10-04 16:51:39

j'ai répondu à cette question ici: Comment redimensionner des images proportionnellement / garder le ratio d'aspect? . Je copie ici parce que je pense vraiment que c'est une méthode très fiable :)

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
5
répondu Jason J. Nathan 2018-08-09 01:45:10

a essayé le code suivant, a bien fonctionné sur IE6 sur WinXP Pro SP3.

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

aussi OK dans FF3 et Opera 9.26.

4
répondu PhiLho 2008-10-04 16:52:47

exemple: comment redimensionner avec un pourcentage

<head>
    <script type="text/javascript">
        var CreateNewImage = function (url, value) {
            var img = new Image;
            img.src = url;
            img.width = img.width * (1 + (value / 100));
            img.height = img.height * (1 + (value / 100));

            var container = document.getElementById ("container");
            container.appendChild (img);
        }
    </script>
</head>
<body>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button>
    <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button>
    <div id="container"></div>
</body>
3
répondu equiman 2012-12-18 17:21:27

vous ne devez pas le faire avec Javascript. Vous pouvez simplement créer une classe CSS et l'appliquer à votre étiquette.

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}
2
répondu Dimitris Damilos 2012-03-15 21:13:00

Cela fonctionne pour tous les cas.

function resizeImg(imgId) {
    var img = document.getElementById(imgId);
    var $img = $(img);
    var maxWidth = 110;
    var maxHeight = 100;
    var width = img.width;
    var height = img.height;
    var aspectW = width / maxWidth;
    var aspectH = height / maxHeight;

    if (aspectW > 1 || aspectH > 1) {
        if (aspectW > aspectH) {
            $img.width(maxWidth);
            $img.height(height / aspectW);
        }
        else {
            $img.height(maxHeight);
            $img.width(width / aspectH);
        }
    }
}
2
répondu user246340 2018-08-09 01:47:34

Use JQuery

var scale=0.5;

minWidth=50;
minHeight=100;

if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight)
{
    $("#id img").width($("#id img").width()*scale);
    $("#id img").height($("#id img").height()*scale);
}
1
répondu Tim 2011-09-15 18:53:26

essayez ceci..

<html>
<body>
<head>
<script type="text/javascript">
function splitString()
{
var myDimen=document.getElementById("dimen").value;
var splitDimen = myDimen.split("*");
document.getElementById("myImage").width=splitDimen[0];
document.getElementById("myImage").height=splitDimen[1];
}
</script>
</head>

<h2>Norwegian Mountain Trip</h2>
<img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>

</body>
</html>

dans la zone de texte donner la dimension que vous souhaitez, dans le format 50*60. Cliquez sur soumettre. Vous obtiendrez l'image redimensionnée. Donnez votre chemin d'image à la place des points dans l'étiquette d'image.

1
répondu vadivu 2012-01-19 07:27:34
function resize_image(image, w, h) {

    if (typeof(image) != 'object') image = document.getElementById(image);

    if (w == null || w == undefined)
        w = (h / image.clientHeight) * image.clientWidth;

    if (h == null || h == undefined)
        h = (w / image.clientWidth) * image.clientHeight;

    image.style['height'] = h + 'px';
    image.style['width'] = w + 'px';
    return;
}

il suffit de le passer soit un élément img DOM, ou l'id d'un élément image, et la nouvelle largeur et la hauteur.

ou vous pouvez le passer juste la largeur ou juste la hauteur (si seulement la hauteur, puis passer la largeur comme nul ou non défini) et il va redimensionner maintien du rapport d'aspect

0
répondu 2009-06-23 16:06:43

pour redimensionner l'image en javascript:

$(window).load(function() {
mitad();doble();
});
function mitad(){ 

    imag0.width=imag0.width/2;
    imag0.height=imag0.height/2;

    }
function doble(){ 
  imag0.width=imag0.width*2; 
  imag0.height=imag0.height*2;}

imag0 est le nom de l'image:

 <img src="xxx.jpg" name="imag0">
0
répondu user2561474 2013-07-08 16:19:09

voici ma solution de remplissage de couverture (similaire à background-size: cover, mais elle prend en charge l'ancien navigateur IE)

<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">
    <img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
    $(window).load(function() {
        var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
        var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();

        if (window.console) {
            console.log($("#imgCat").height());
            console.log(heightRate);
            console.log(widthRate);
            console.log(heightRate > widthRate);
        }
        if (heightRate <= widthRate) {
            $("#imgCat").height($("#imgCat").parent(".imgContainer").height());
        } else {
            $("#imgCat").width($("#imgCat").parent(".imgContainer").width());
        }
    });
</script>
0
répondu Weijing Jay Lin 2015-07-01 08:16:38