Сверху - Как растянуть изображения?

Я пытаюсь получить supersized, чтобы не обрезать изображения и растянуть их, чтобы заполнить фон 100% по ширине и высоте (меня не волнует, искажаются ли изображения).Сверху - Как растянуть изображения?

Я использую fit_always поэтому изображения не получить обрезаны и в CSS:

#supersized img { 
    width:100%; 
    height:100%; 
    position:relative; 
    display:none; 
    outline:none; 
    border:none; 
}

HTML

<script type="text/javascript"> 
jQuery(function($){ 
    $.supersized({ 
    // Functionality 
    slide_interval : 5000, 
    transition : 1, 
    transition_speed : 500, 
    horizontal_center : 0, 
    fit_always : 1, 

    // Components       
    slides : [ // Slideshow Images 
       {image : '/img/main/home.jpg'}, 
       {image : '/img/main/home-2.jpg'}, 
       {image : '/img/main/home-3.jpg'}, 
       {image : '/img/main/home-4-test.jpg'}, 
       {image : '/img/main/home-4.jpg'} 
      ]  
    }); 
}); 
</script>

работает отлично, но если я изменить размер окна браузера width:100% и height:100% получает «забыли»

Что мне не хватает?

источник

2013-05-28 Cris

Можем ли мы увидеть HTML? – Maresh

Ожидаете ли вы, что в окне просмотра всегда будет одинаковое соотношение ширины и ширины? В противном случае изображение может быть искажено. – Mike

Я имею в виду, где изображения, вставленные в документ HTML. – Maresh

Вы использовали «авто» вместо 100%?

#supersized img { 
    width:auto; 
    height:auto; 
    position:relative; 
    display:none; 
    outline:none; 
    border:none; 
}

источник

2013-05-28 07:43:43 MrSo

Да, не работает. – Cris

В моем опыте, настройки по умолчанию для сверхъизбыточных делать только то, что вы хотите, без чего-либо, как fit_always. В демо-коде, который я сохранил локально, JS выглядит следующим образом:

$(function(){ 
    $.fn.supersized.options = { 
     startwidth: 640, 
     startheight: 480, 
     vertical_center: 1, 
     slideshow: 1, 
     navigation: 1, 
     thumbnail_navigation: 1, 
     transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left 
     pause_hover: 0, 
     slide_counter: 1, 
     slide_captions: 1, 
     slide_interval: 3000, 
     slides : [ 
      {image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'}, 
      {image : 'slides/fence.jpg', title : 'Canal Park Fence', url : 'http://www.flickr.com/photos/wumbus/4582735030/sizes/l/in/set-72157623876357531/'}, 
      {image : 'slides/tracks.jpg', title : 'Old Train Tracks', url : 'http://www.flickr.com/photos/wumbus/4582733542/in/set-72157623876357531/'} 
     ] 
    }; 
    $('#supersized').supersized(); 
});

источник

2013-05-28 07:51:11

Нет, они этого не делают. Я не хочу, чтобы изображение было обрезано вообще и хотело, чтобы оно растянулось по ширине и высоте браузера. – Cris

О, я вижу. Ну, в CSS вы можете использовать 'background-size: 100% 100%', и это будет сделано. Но я понимаю, что здесь не очень важно. –

Эта проблема может возникнуть для ширины/высоты контейнера. Вы уже установили высоту ширины изображения до 100%. Это будет работать. Если ваш контейнер не равен 100% по ширине/высоте, тогда изображения не может быть. Если нет контейнера, используйте 100% для тела, html.

источник

2013-05-28 07:56:18 HADI

-1

Попробуйте

#supersized img {      
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    }

источник

2013-05-28 08:44:58 Aravind30790

Сверху - Как растянуть изображения?

ответ

Смежные вопросы