图像取决于屏幕左侧尺寸答案

【问题标题】：Image depending on screen left size图像取决于屏幕左侧尺寸
【发布时间】：2011-11-21 23:37:54
【问题描述】：

所以我有一个侧边栏在左侧（ 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>

EDIT ：所以示例是 - 如果我的分辨率是 1000 像素，那么图像大小宽度将为 900 像素。侧边栏总是在右侧，宽度为 100 像素。

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

【问题讨论】：

你的“左边”有一个固定的宽度，那么你的图片应该什么时候调整大小？您的意思是您希望图像与侧边栏右侧的图像一样大吗？
我不明白你的问题。我看到左边有一个 100px 宽的侧边栏，右边有一个图像。我不明白“是否可以根据没有右侧的大小调整图像大小？”你能再解释一下，或者告诉我你想要它的样子吗？
@CoryDanielson 我已将示例添加到我的帖子中。
@NathanQ 我已将示例添加到我的帖子中
@iKaspars 好的，请看下面的答案，希望这是你需要的

标签： css image

【解决方案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/

【讨论】：

【解决方案2】：

不太清楚如何在没有 javascript 的情况下做到这一点。

但是我把这个简单的小提琴放在一起给你。

http://jsfiddle.net/4VrvN/

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

【讨论】：

嗯.. 它有效。只有当我调整浏览器窗口的大小时，我才必须刷新页面。但这不是一个大问题。我希望如此....