列固定高度-保持图像长宽比？

debugcn 发表于 Dev

角cho

我的代码在这里：JSFiddle（我正在使用Bootstrap 3）

基本上，我的问题是我无法获取列中的图像以保持其宽高比，这可能是因为列高是固定的。

如果我删除：

img {
width: 100%;
height:100%;
}

图像只是被裁剪...

列的大小是固定的，因为我希望页面的整个主体垂直适合窗口并且没有滚动条，因为我正在桌面应用程序上工作，所以我发现的唯一解决方案是在Viewport单元中定义所有内容。

我不确定自己是否在正确的道路上，尝试在vh / vw中定义所有内容？也许还有另一种方法？

粗略地说（或画图）这是我最终要实现的目标：布局

任何输入将不胜感激。

卢卡斯·赫根伯格（Lukas Hechenberger）

div如果使用img-tags，请使用s代替，并将图像src用作背景网址。然后，您可以设置background-size到contain的cover。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
html, body{
    height:100vh;
    overflow:hidden;
}

.container-fluid {
    height: 80vh;
    width: 90vw;
    overflow-y:hidden;
}

.col-lg-6 {
    height: 32vh;
    overflow:hidden;
}

.col-md-6 {
    height: 32vh;
    overflow:hidden;
}

.col-s-6 {
    height: 32vh;
    overflow:hidden;
}

img {
 width: 100%;
  height:100%;
}

#img-1 {
  background: url(http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg) center center no-repeat;
  background-size: contain;
  height: 100%;
}

#img-2 {
  background: url(http://noliesradio.org/wp/wp-content/uploads/2014/02/introslide.JPG_.jpg) center center no-repeat;
  background-size: cover;
  height: 100%;
}

 <div class="container-fluid">
 <div class="row">
      <div class="row">
          
    <div class="col-lg-6 col-md-6 col-s-6">
      <div id="img-1" src="http://farm5.staticflickr.com/4149/5174348786_e4a8494137.jpg">
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-s-6">
      <div id="img-2">
      </div>
    </div>
  </div>
     <div class="row">
          
    <div class="col-lg-6 col-md-6 col-s-6">
      <img src="http://www-static.weddingbee.com/pics/52547/jacaranda.jpg">
    </div>
                                        
    <div class="col-lg-6 col-md-6">
      <img src="http://www.paramountplants.co.uk/images/evergreen-screening/acer-palmatum-dissectum-garnet-specimen-tree.jpg">
    </div>
  </div>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。