Javascript 이미지 크기조정할

Javascript 를 사용하여 비율에 맞게 이미지 크기조정할 방법 아는 사람?

나도 날잡아 dom 을 수정할 수 있지만, '속성' 높이 '와' 너버 추가하기만 즉석에서 IE6 작동하지 못한 것 같다.

Adriano
편집된 질문9일 8월 2018 в 3:44
프로그래밍
internet-explorer-6 javascript image-manipulation
4일 10월 2008 в 4:39
2 파운드
질문에 대한 의견 (2)
해결책

단순히 이미지를 수정 비례, css 속성을, 다른 하나는 미디어만을 변경하십시오 너비입니다 / 높이 남겨두십시오 자동으로 설정되었습니다.

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

이를 통해 해당 종횡비 그대로 남아 있습니다.

    • Dell. 크기조정 이미지 브라우저 경향이 있다는 것을 명심해야 할 것이다. - # 39, ll 아주 잘 빨아들일 you& 도움이 되는 크기조정 이미지를 개판이예염 보입니다.
해설 (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";

하나의 공통 &quot gotcha"; 에로남이네 폭과 높이가 스타일은 문장열 유닛 포함하는 등 px&quot "; 위의 예에서.

편집 - 나도 그렇게 생각해 폭과 높이가 설정 및 스테일스위드스 스티레자에이트 사용하지 않고 직접 노력해야 합니다. 원래 크기 또한 이미 갖고 있는 장점을 가지고 있습니다. 조금 코드에 게시물로의 수 있습니까? # 39, re in 표준 모드 대신 계속하시겠습니까 you& 쿼크 모드?

이 노력해야 합니다.

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
Neall
편집된 답변4일 10월 2008 в 4:51
해설 (0)

나는 답변됨 이 여기에 질문: [비율에 맞게 이미지 / 화면 비율을 유지하는 방법을 크기조정할?] [2]. 나는 여기에 복사 때문에 아주 안정적인 방법을 생각합니다:)

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

[2]: # 14731922 https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio/14731922

Pang
편집된 답변9일 8월 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;
}

또한, 오페라 9.26 FF3 에서 확인.

해설 (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)

39, Javascript 와 t don& 해야 할 수 있습니다. Css 클래스를 작성할 수 있으며, img&gt &lt 적용하십시오 됩니다. 태그이고,

.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일 8월 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 강조표시할 ur 에서 치수값이 열거하십시오 있다. Submit (제출) 을 클릭합니다. 이 크기조정 이미지를 얻을 수 있습니다. 이미지의 이미지 경로에 제공하세요 점의 배치하십시오 태그이고,

해설 (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일 9월 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 DOM element, 또는 id 하나에 이미지 요소 및 새로운 폭과 높이를.

그냥 가공할지 너비입니다 인컨텍스트 통과시킬 수 있고 높이 (또는 null 로 너비입니다 경우 단순히 높이 관심용 전달하십시오 정의되지 않은) 크기조정할 화면 비율을 유지할 것

해설 (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)