Question

我是编码的新手，但我正在努力。还有一件事我还是完全不明白。在div / image内部划分并使用bootstrap定位。我试图创建一个响应式网站，并需要一些布局方面的帮助。

这是我的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>

这里是image

随着网站缩小，我希望图像和橙色div也缩小。

fiddle link

Answer 1

说明

使图像缩放的关键是将其宽度设置为100％，就像我在#image_div img下所做的那样。这样它将占用它的父容器的宽度。

然后你必须确保父容器是流动的。在我的例子中，我把它做了80％。这样它总是80％的浏览器宽度，或父宽度 - 取决于它是否包装在另一个div中。

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

希望有助于澄清事情。

其他资源

如果您有兴趣了解更多关于响应的信息，那么这本书不会令人失望。超级快速阅读，它将回答您关于响应的所有问题：

http://www.abookapart.com/products/responsive-web-design

示例代码+ JSFiddle

以下是您正在寻找的内容的一个示例：http://jsfiddle.net/f25xM/1/ HTML

<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>

CSS

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;
}

Answer 2

我不确定你为什么在＆＃34; image_div＆＃34;但您可以将图像的宽度设置为100％。并且当容器div调整大小时，图像也会调整大小。不确定这是否有意义，没有你的一些css或小提琴或codepen很难帮助你。

Answer 3

在Bootstrap3中，您只需添加class="img-responsive"即可使其成为父元素的100％。

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

3 个答案:

说明

其他资源

示例代码+ JSFiddle