Javascript Изменение размера изображения

Кто-нибудь знает, как изменить пропорциональный размер изображений с помощью JavaScript?

Я пытался модифицировать DOM, добавляя атрибуты height и width на лету, но, кажется, это не работает в IE6.

Adriano
Редактировал вопрос 9-го августа 2018 в 3:44
Программирование
internet-explorer-6 javascript image-manipulation
4-го октября 2008 в 4:39
26 просмотров
Комментарии к вопросу (2)
Решение

Чтобы изменить изображение пропорционально, просто измените только одно из css-свойств width/height, а второе оставьте в значении auto.

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

Это обеспечит неизменность соотношения сторон изображения.

Имейте в виду, что браузеры, как правило, отстойно справляются с изменением размеров изображений - скорее всего, вы обнаружите, что ваше увеличенное изображение выглядит ужасно.

Комментарии (1)

ладно она решена, вот мой окончательный код

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

Спасибо, ребята

Комментарии (8)

Вместо того чтобы изменять атрибуты высоты и ширины изображения, попробуйте изменить высоту и ширину CSS.

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

Одна из распространенных "загвоздок" заключается в том, что стили высоты и ширины представляют собой строки, включающие единицу измерения, как "px" в примере выше.

Редактировать - Я думаю, что установка высоты и ширины напрямую вместо использования style.height и style.width должна работать. Преимущество этого способа в том, что у него уже есть исходные размеры. Можете ли вы опубликовать часть вашего кода? Вы уверены, что находитесь в режиме стандартов, а не в режиме причуд?

Это должно сработать:

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
Neall
Редактировал ответ 4-го октября 2008 в 4:51
Комментарии (0)

Я ответить этот вопрос здесь: Как изменить размер изображения пропорционально / сохранением пропорций?. Я копирую его здесь, потому что я действительно думаю, что это очень надежный способ :)

 /**
  * 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 };
 }
Pang
Редактировал ответ 9-го августа 2018 в 1:45
Комментарии (0)

Попробовал следующий код, работает нормально в IE6 на 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;
}

Также все нормально в FF3 и Opera 9.26.

Комментарии (0)

Пример: как изменить размер процента


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


    Zoom +40%
    Zoom +50%
    <div id="container"></div>
Комментарии (0)

Вы Don'т придется сделать это с помощью JavaScript. Вы можете просто создать класс CSS и применить его к вашей <ИМГ и GT; тег.

.preview_image{
        width: 300px;
    height: auto;
    border: 0px;
}
Комментарии (0)

Это работает для всех случаев.

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);
        }
    }
}
Pang
Редактировал ответ 9-го августа 2018 в 1:47
Комментарии (1)

Попробуйте это..




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


<h2>Norwegian Mountain Trip</h2>
![Pulpit rock](...)<br>
<input type="text" id="dimen" name="dimension" />
<input type="submit" value="Submit" Onclick ="splitString()"/>

В текстовом поле даст размер как ваш хотите, в формате 50*60. Нажмите кнопку "Отправить". Вы получите уменьшенное изображение. Дать свой путь изображения в место точек в теге изображения.

Комментарии (0)

Использовать 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);
}
julkiewicz
Редактировал ответ 15-го сентября 2011 в 6:53
Комментарии (0)

чтобы изменить размер изображения в 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 название изображения:

Комментарии (1)
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;
}

просто передайте его либо элемент img дом или идентификатор элемента изображения, и новая ширина и высота.

или вы можете передать его либо только ширину или только высоту (если только высоту, затем пройти ширины, как null или undefined) и он будет изменять, сохраняя пропорции

Комментарии (0)

Вот мой крышку заполняют раствором (похож на фон-размер: обложка, но его поддерживает старый браузер IE)


<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black">

</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
Комментарии (0)