Изображение в зависимости от размера экрана слева

Question

Итак, у меня есть боковая панель с левой стороны (100 пикселей), а затем у меня есть изображение с правой стороны.Можно ли изменить размер изображения в зависимости от размера, который не оставил правую сторону?

Например:

<div id="sidebar"></div> 
<img src="image" alt="Work">

<style>
#sidebar {
float: left;
width: 100px;
background: red; 
height: 500px;
}
img {
float: left;
width: 80%; /* This is not working right */
}
</style>

РЕДАКТИРОВАТЬ : Пример будет такой: если мое разрешение 1000 пикселей, то ширина изображения будет 900 пикселей.И боковая панель всегда будет на правой стороне, и она будет иметь ширину 100 пикселей.

Имеется скриптовая ссылка - http://jsfiddle.net/qLnZu/4/

Answer 1

Оберните div вокруг тега img:

<div id="sidebar">
</div> 
<div id="right">
   <img src="http://lorempixel.com/1000/1000/sports/" alt="Work">
</div>

И в CSS:

#sidebar {
  float: left;
  width: 100px;
  background: red; 
  height: 500px;
}

#right {
  margin-left: 100px; //width of sidebar
}

#right img {
  width: 100%;
}

пример:

http://jsfiddle.net/qLnZu/6/

Answer 2

Не слишком уверен, как это сделать без JavaScript.

Но я собрал эту простую скрипку для тебя.

http://jsfiddle.net/4VrvN/

$('img').width($(window).width() - 100 + 'px');