Question

我需要在col-md-9和左侧col-md-3菜单上设计响应式图像

提供建议附加图像 reference link for image design

<div class="container-fluid">
    <div class="row" id="icon_hme">
        <div class="col-sm-3 col-md-3 sidebarone" id="resp_design_change"> </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main"> 
            <img id="image_background" class="img-responsive" src="assets/img/background.png"> 
        </div>
    </div>
</div>

Answer 1

我想我已在CodePen上为此设置了合适的模板。希望它可以帮助你开始。

<强> CSS

.img-responsive {
  width: 100%;
}

.no-padding {
  padding: 0;
}

.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

.img-col,
.menu,
header {
  outline: 1px solid #000;
}

<强> HTML

<div class="container-fluid">
  <div class="row">
    <header>Header</header>
  </div>
  <div class="row row-eq-height" id="icon_hme">
    <div class="menu col-xs-3 sidebarone" id="resp_design_change">Menu</div>
    <div class="img-col col-xs-9 main no-padding">
      <img id="image_background" class="img-responsive" src="http://placehold.it/500x500">
    </div>
  </div>
</div>

完整的图像响应col-md-9引导程序

1 个答案: