변경/동적 크기 조정의 크기에 서로 다른 이미지를 자르기 DIV

Question

(브라우저에 따라) 나는 같은 질문 천 개 스레드처럼이 있다는 것을 알고 있어요. 내가 전부 다 읽었다 고 말하면 나는 거짓말을하지만, 나는 그것들을 많이 읽는다.

현재 문제는 다음과 같습니다. 브라우저의 크기에 따라 크기가 조정되고 하단에 "메뉴"가있는 바닥 글이 있습니다. 자, div에서 페이드 인하거나 페이드 아웃하는 "배경"이미지를 배치했습니다. jquery 전환을 사용할 수 없기 때문에 CSS 속성 배경 이미지로 설정되지 않았기 때문에 인용문을 사용합니다. css3 전환은 IE에서는 지원되지 않음). 나는 이것을 달성하기 위해 $(window).resize을 사용했다. (그리고 그런 식으로 div가 메뉴에 나타나지 않는 지점에 너무 많이 펴는 문제를 해결했다.) 지금까지는 이미지가 브라우저의 너비/높이 비율에 정확하게 맞지 않을 때 문제가 발생합니다. 물론 화면의 픽셀에 따라 동적으로 max-width, height 등을 사용하여이 문제를 해결해 보았습니다. 어느 정도까지는 효과가있었습니다. 일부 이미지의 종횡비가 "잘못"되어 크기를 조정할 때 화면 모서리에 공백이 남기 때문에 어느 정도 말합니다 (일부는 높이, 일부는 너비). 그것이 단지 하나의 이미지라면 나는 그 이미지를 수동으로 잘라서 적합하게 만들 것입니다. 문제는 내가 그들 중 많은 것을 가지고 있다는 것이다.

문제를 해결하기위한 제 아이디어는 다음과 같습니다. 브라우저의 너비 또는 브라우저의 높이로 크기를 조정할 때 각 이미지는 공백으로 남습니다. 난 공백으로 남기지 않을 크기로 이미지의 크기를 조정하고 화면의 높이/너비를 초과하는 이미지의 다른 부분을 잘라내거나 자르고 싶습니다.

나는 이것을 달성하는 방법을 모른다. jquery에서 일부 이미지 자르기를 검색하고 내가 원한 것이 아닌 것을 발견했습니다. 그림의 일부를 선택하는 Moslty ... 나는 모른다.

어떤 아이디어? 질문에 답하거나 내 코드에 대한 자세한 내용을 제공 할 수 있습니다.

고맙습니다. 이미지를 변경

내 기능 :

$(function() { 
     $imgs = $('.bgChange'), 
     imgAmount = $imgs.length; 

    $($imgs.css('position', 'absolute').hide().get(0)).show(); 

    window.setInterval(swapImages, tiempo); 

    function swapImages() { 
     var $currentImg = $($imgs[current]); 
     if(current == imgAmount-1) current = -1; 
     var $nextImg = $($imgs[++current]), 
      speed = 1500; 
     $currentImg.fadeOut(speed,function(){$nextImg.fadeIn(speed);}); 

    } 
}); 

내 .bgChange 클래스

.bgChange 
{ 
margin:0; 
border:0; 
padding:0; 
z-index:-1; 
position:absolute; 
} 

이미지 (그것이 내가 돈 일부 CSS 속성을 사용하여 화면의 크기에 맞는 나의 DIV ' 이해가 필요하고 별도의 파일에 있습니다. 누군가가 그것을 필요로한다면 나는 그들을 붙여 넣을 수 있습니다 :

<div id="DummyFondo"> 
     <img class='bgChange' src="img/bg03.jpg" alt="" /> 
     <img class='bgChange' src="img/foto_2.jpg" alt="" /> 
     <img class='bgChange' src="img/Semillas2.jpg" alt="" /> 
     ....goes on 
</div> 

내 크기 조정 기능 :

resizeImages 방법이 작동하지 않는

$(window).resize(function() 
{ 
    ResizeImages(); 
}); 

, 그것은 내가

function ResizeImages() 
{ 

    $imgs = $('.bgChange'), 
    imgAmount = $imgs.length; 
    for(a = 0; a < imgAmount; a = a + 1) 
    { 
     var $currentImg = $($imgs[a]); 
     $currentImg.css("max-width", $(window).width() + "px" + " !important;"); 
     $currentImg.css("max-height", $(window).height() + "px" + " !important;"); 
    } 

} 

같은 것들을 시도했습니다 .. 난 변화를 싶은 사람의 최소 폭 높이, 폭,에 그런 것들을 변경 등. "자르기"논리를 넣고 자하는 위치는 여기에 있습니다. 자르기 쪽 (및 자르기 자체)을 결정하는 계산

Answer 1

첫째, 여기에 내가 설명하려고 해요 무엇의 작은 데모의의 에 맞게 이미지 크기를 조정 창 (귀하는 div 또는 다른 컨테이너 요소에 맞게 쉽게 변경할 수 있음) : little link to the little demo.

내 아이디어는 크기가 더 큰 (높이/너비) 크기가 더 큰 경우 크기를 조절 한 다음 작은 치수에서 초과하는 양을 "자르기"위해 적절한 음수로 위치를 "당깁니다" 값. 여기에 그 데모에 크기 조정을 수행하는 코드는 다음과 같습니다 내가 어떤 방식으로 당신을 도와 희망

function resizeImg() { 
    var curimg = $('.bgChange'); 
    var ww = $(document).innerWidth(), hh = $(document).innerHeight(); 
    if(hh > ww) { 
     curimg.height(hh); 
     var lft = - Math.floor((curimg.width() - ww)/2); 
     curimg.css({"top":"0px", "left":lft}); 
    } 
    else if(ww > hh) { 
     curimg.width(ww); 
     var tp = - Math.floor((curimg.height() - hh)/2); 
     curimg.css({"left":"0px", "top":tp}); 
    } 
} 

! 모호한 부분이라면 코드의 일부를 설명 할 수있어서 기쁩니다.

Answer 2

어떤 브라우저를 지원해야합니까?CSS3는이를 정렬 할 수 있습니다

.backgroundDiv { 
    background-size: cover; 
} 

jQuery를은 이전 버전의 브라우저에서이 작업을 할 수 있습니다 : http://louisremi.github.com/jquery.backgroundSize.js/demo/