Question

所以我有一个侧边栏是左侧（100px），然后我在右侧有一个图像。是否可以根据没有右侧的尺寸调整图像大小？

例如：

<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像素。侧边栏总是在右侧，宽度为100px。

有小提琴链接 - http://jsfiddle.net/qLnZu/4/

Answer 1

围绕img标签包裹div：

<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');

图像取决于屏幕左侧大小

2 个答案: