Frage

Wer weiß, wie Bilder proportional, um die Größe mit Hilfe von JavaScript?

Ich habe versucht, das DOM zu ändern, indem Attribute height und width on the fly hinzugefügt, scheint aber nicht auf IE6 nicht funktioniert.

War es hilfreich?

Lösung

ein Bild proportional zu ändern, einfach nur eine der CSS-Eigenschaften Breite / Höhe ändern, lassen Sie den anderen Satz zu auto. 

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

Dadurch wird sichergestellt, dass das Seitenverhältnis bleibt gleich.

Beachten Sie, dass Browser ist in der Regel saugt auf Bilder schön Größe ändern - Sie wahrscheinlich feststellen, dass Ihre Größe geänderte Bild sieht schrecklich

.

Andere Tipps

okay, es gelöst, hier ist mein letzter Code 

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

Danke Jungs

Statt die Höhe und Breite Attribut des Bildes ändern, versucht die CSS-Höhe und Breite zu ändern. 

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

Ein gemeinsamer „Gotcha“ ist, dass die Höhe und Breite Stile sind Zeichenfolge, die eine Einheit, wie „Pixel“ im Beispiel oben sind.

Bearbeiten - Ich denke, dass die Höhe und Breite direkt Einstellung anstelle der Verwendung style.height und style.width sollten funktionieren. Es hätte auch den Vorteil, bereits die ursprünglichen Abmessungen. Können Sie ein wenig Code schreiben? Sind Sie sicher, dass Sie im Standardmodus statt Quirks-Modus sind?

Dies sollte funktionieren: 

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;

Ich habe diese Frage beantwortet hier: Wie Bilder proportional, um die Größe / das Seitenverhältnis zu halten? . Ich kopiere es hier, weil ich glaube wirklich, es ist eine sehr zuverlässige Methode ist:) 

 /**
  * 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 };
 }

Versuchte den folgenden Code, arbeitete auf IE6 auf WinXP Pro SP3 OK. 

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;
}

Auch OK in FF3 und Opera 9.26.

Beispiel: Wie man mit einem Prozent auf der Größe 

<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>

Sie müssen es nicht tun mit Javascript. Sie können nur eine CSS-Klasse erstellen und an das Tag anwenden. 

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}

Dies funktioniert für alle Fälle. 

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);
        }
    }
}

Mit 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);
}

Versuchen Sie dies .. 

<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>

Im Textfeld geben Sie die Dimension als ur Wunsch, im Format 50 * 60. Klicken Sie auf Senden. Sie werden das verkleinerte Bild bekommen. Geben Sie Ihr Bild Pfad anstelle von Punkten in dem Image-Tag. 

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;
}

es einfach passieren entweder ein img DOM-Element oder die ID eines Bildelements, und die neue Breite und Höhe.

oder Sie können sie passieren entweder nur die Breite oder die Höhe (wenn nur die Höhe, dann die Breite als null oder nicht definiert passieren) und es wird die Größe Seitenverhältnis zu halten

, um die Größe Bild in 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 ist der Name des Bildes: 

 <img src="xxx.jpg" name="imag0">

Hier ist meine Abdeckung Fülllösung (ähnlich Hintergrund-size: Abdeckung, aber es unterstützt die alten IE-Browser) 

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top