Html 响应式布局，在嵌套div中缩放图像

我不熟悉编码，但我正在努力。有一件事我仍然完全不明白。Div内的Div/图像缩放和定位使用引导。我正在尝试建立一个响应性强的网站，需要一些布局方面的帮助

以下是我的HTML代码：

 <div class="container">
      <!-- Pagrindinis divas -->
      <div id="left_bar" class="col-md-8">

          <div id="image_div">
            <div ><img src="http://placehold.it/120x100"/></div>
          </div>

          <div id="text_div">    
            <div id="heading_text">
                Heading 1
            </div>
            <div id="text" class="p">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.
                </div>
            </div>  
          </div>
      </div>

      <!-- Soninis widgetas -->
      <div id="right_bar" class="col-md-4 hidden-sm hidden-xs">
    Right bar    
      </div><!-- Soninio widgeto pabaiga -->
    </div>

标题1
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。他是个虔诚的信徒。妊娠期妇女缺乏持续性营养。这是一个不可能的结果。毛里斯·迪格森·康莫多·费利斯·奎斯·森佩尔。
右栏

这是一个

当网站缩小时，我希望图像和橙色div也缩小

---

我不知道为什么在“image\u div”中有一个div，但您可以将图像的宽度设置为100%。这样，当容器div调整大小时，图像也将调整大小。不确定这是否有意义，如果没有一些css、小提琴或代码笔，很难帮助您

解释 制作图像缩放的关键是将其宽度设置为100%，就像我在#image_div img下所做的那样。这样，它将具有其父容器的宽度

然后，您只需确保父容器是流体。在我的例子中，我把它提高了80%。这样，它将始终是浏览器宽度的80%，或父宽度-取决于它是否包装在另一个div中

当80%容器因img设置为100%而缩放时，它将始终占据80%容器的100%

希望这有助于澄清问题

额外资源 如果你有兴趣了解更多关于响应的信息，这本书不会让你失望。超级快速阅读，它将回答您在以下方面的所有问题：

示例代码+JSFiddle 以下是您正在寻找的示例： HTML

---

在Bootstrap3中，您可以添加

class=“img responsive”

，使其成为100%的父元素。

我在帖子底部添加了一个小提琴链接：）图像似乎只有在受到影响时才重新调整大小，而不是整个div:）别忘了将问题标记为已解决，以防万一有人提出同样的问题。干杯谢谢，我为容器添加了百分比宽度，它实现了我想要的效果：）

<div class="cf wrapper">
    <div class="container">
        <!-- Pagrindinis divas -->
        <div id="left_bar" class="cf col-md-8">
            <div id="image_div">
                <img src="***" />
            </div>
            <div id="text_div">
                <div id="heading_text">Heading 1</div>
                <div id="text" class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.</div>
            </div>
        </div>
    </div>
    <!-- Soninis widgetas -->
    <div id="right_bar" class="col-md-4 hidden-sm hidden-xs">Right bar</div>
    <!-- Soninio widgeto pabaiga -->
</div>

body {
    margin:0;
    padding:0;
}
.wrapper {
    background:red
}
.container {
    background:red;
    width:80%;
}
#left_bar, #right_bar {
    float:left;
}
#left_bar {
    background:green;
}
#right_bar {
    background:purple;
    width:20%;
}
#image_div, #text_div {
    float:left;
}
#image_div {
    background:orange;
    width:20%;
}
#image_div img {
    width:100%;
}
#text_div {
    background:yellow;
    width:80%;
}
/* Clearfix */
 .cf:before, .cf:after {
    content:" ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}