CSS Динамическое позиционирование относительных элементов

Question

Как бы я динамически изменял размер элемента с помощью position:relative;? Я попробовал использовать width:45%;, чтобы он всегда был 45% его контейнера, но при изменении размера браузера я обнаружил, что он остался размером с первоначально загруженным, когда я обновил страницу, он был меньше, но остался меньше, когда Я сделал страницу больше. Я буду принимать решения jQuery и/или Javascript, но очень хотел бы CSS. Кроме того, если это похоже на ошибку с моим кодом, а не из-за того, как position:relative; работает фундаментально, дайте мне знать, и я добавлю свой код на стол в скрипке.

EDIT: Код Добавлено

<div id="container"> 
<p class="caption"> 
    <img class="thumbnail" src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder"> <span> 
       <b>This is the Caption's Title</b> 
       This is the caption's description 
      </span> 

</p> 

Посмотреть остальные here

Это похоже на работу в скрипку, не знаю, почему он не будет работать на стороне клиента.

Answer 1

Ваша проблема связана с тем, что javascript выполняется на загрузке страницы.

Когда он выполняет итерации по вашему .captions, он устанавливает встроенный стиль для ширины и высоты .caption.

Эта часть:

... 
    $(this) 
     // Add the following CSS properties and values 
     .css({ 
      // Height equal to the height of the image 
      "height": $(this).children("img").height() + "px", 
      // Width equal to the width of the image 
      "width": $(this).children("img").width() + "px" 
     }) 
... 

JQuery .css устанавливает встроенные стили, поэтому, когда вы измените размер окна ничего не изменится, потому что img имеет статическую ширину и высоту.

Вы пытаетесь переопределить это в своем CSS с помощью объявления !important, но встроенные стили выигрывают.

Удаление этого блока кода, кажется, устраняет проблему, но я не знаю, представит ли она другие проблемы.

Я также поместил этот код в его собственную функцию под названием setCaptionSize() и запустил его при загрузке страницы и прикрепил ее к событию изменения размера окна.

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

Я также переместил событие парения из setCaptionSize так что бы не получить связаны несколько раз.

Смотреть это Fiddle для демо