Как я могу растянуть DIV во весь экран при нажатии кнопки?

У меня есть изображение, и я просто пытаюсь растянуть его на весь экран, щелкнув в любом месте изображения. Итак, я сделал изображение на фоне DIV. У меня возникли проблемы с javascript: в частности, с таргетингом на CSS. Пожалуйста, дайте мне знать, используя jsfiddle.Как я могу растянуть DIV во весь экран при нажатии кнопки?

Вот моя текущая попытка: http://jsfiddle.net/Muimi/hSzq7/

$(document).ready(function(){ 
    $('.beforeClick').click(function(){ 
     $('.beforeClick').css(div#stretch'width',"33fpx"); 
      $(this).css(div#stretch'width',"100%"); 
    }); 
}); 

div#stretch{ 
    height: 334px; 
    width: 640px; 
    background-image: url(http://i.investopedia.com/inv/articles/slideshow/6-generic-products/generic-just-as-good.jpg); 
} 

<body> 
    <div id="stretch"></div>  
</body>

источник

2013-08-27 Wolfpack' 08

$('#stretch').click(function() { 
    $(this).toggleClass('fullscreen'); 
});

CSS

html, body { 
    height: 100%; 
    min-height: 100%; 
} 

div#stretch{ 
    height: 334px; 
    width: 640px; 
    background-image: url(http://i.investopedia.com/inv/articles/slideshow/6-generic-products/generic-just-as-good.jpg); 
} 

div#stretch.fullscreen { 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: center; 
}

Fiddle

источник

2013-08-27 12:02:38 Turnip

Добавляя к вашему ответу, вы также можете использовать фон -размер: обложка, чтобы удалить любые границы, обрезая изображение. См. http://jsfiddle.net/hSzq7/22/ –

wow Мне это очень нравится – Nickool

@David Hewitt Я решил против 'cover', поскольку он обрезает изображение.Только предположение, но я предполагаю, что OP хочет получить полное изображение. – Turnip

Вы рассматривали добавление/удаление класса по щелчку, а не изменять атрибуты в «этом» классе? Вы даже можете использовать инструкцию if else, с моей точки зрения, я не могу восстановить код дословно.

Рассмотрим:

$(function() {      
$(".clickable").click(function() { 
$(this).addClass("stretched"); 
}); 
});

Что это позволяет сделать два отдельных класса CSS один из которых только становятся активными, когда изображение в щелкнул, а другой, когда это не так.

P.S, Marcell также верен. Во что бы то ни стало используйте 100%, но есть альтернативы.

Рассмотрим:

position: absolute; 
top: 0; 
bottom: 0;

источник

2013-08-27 11:58:21 user5623896726

Ваш код не является правильным. Проверьте этот синтаксис и отредактируйте его самостоятельно.

http://jsfiddle.net/hSzq7/12/

$(function(){ 
    $('div#stretch').click(function(){ 
    $(this).css('height',"33px").css('width',"100%"); 
    }); 
});

важно установить htmlbody и высоту до 100%

html, body{ 
    height: 100%; 
}

источник

2013-08-27 11:59:18 M1K1O

Чувак, вы заметили, что, когда вы установите 'высоту', «100% ", изображение исчезает? –

Потому что вы не задали высоту 'HTML' и' BODY' '100%' – M1K1O

Как это: http://jsfiddle.net/kgkXT/?

$(document).ready(function(){ 
    $('#stretch').click(function(){ 
     $(this).css('width',"100%"); 
    }); 
});

И в CSS набор

background-size:100% auto;

источник

2013-08-27 12:00:33 lawl0r

Итак, id идет после $ (', и правило идет после .css (, right? –

Не обижайтесь, но ваш синтаксис был таким полностью выключен, и jquery даже не был включен в вашу скрипку. Я бы предложил прочитать http://learn.jquery.com/about-jquery/how-jquery-works/ и/или изучить базовый синтаксис javascript. – lawl0r

Да , bud. Это правда, я узнал и переучил его, но я не делаю это профессионально. Мне действительно нужно создать хороший список ресурсов с персонализированными ссылочными отметками. –

Как я могу растянуть DIV во весь экран при нажатии кнопки?

ответ

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