Question

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

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

如果我删除：

from not set.
name not set.
subject not set.
message not set.
Error: Array ( [type] => 8 [message] => Undefined variable: message [file] => /home/u884620714/public_html/send_email.php [line] => 14 )

图像只会被裁剪......

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

我不确定我是否在正确的轨道上，尝试用vh / vw定义所有内容？也许有另一种方式？

这是非常粗略地说（或绘图......）我最终想要实现的目标：Layout

任何输入都会非常感激。

Answer 1

使用div代替img - 标记，并将图像src作为背景网址提供。然后，您可以将background-size设置为contain的{{1}}。

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

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

1 个答案: