可调整大小的三列背景图像/封面布局答案

【问题标题】：resizable three column background image /cover layout可调整大小的三列背景图像/封面布局
【发布时间】：2017-11-15 19:12:46
【问题描述】：

背景覆盖率和百分比宽度可用于缩放和对齐图像，因为视口比 16/9 更水平。对于屏幕高度超过宽度的 0.5625 的情况，外部布局部分开始占据中心。在这种情况下，最好从左右裁剪，或者在顶部和底部添加空白条。

请提供您已知的最佳做法。非常感谢您的参与，和平，ayo。

<div class="bg">
</div>
<div class="column" id="column_left">
</div>
<div class="column" id="column_center">
</div>
<div class="column" id="column_right">
</div>

css:

bg {
   position: relative;
   overflow: hidden;
   height: 100%;
   width: 100%;
   max-width: 1920px;
   background: url(images/1920/bg.png) no-repeat center 0 /cover;
}

.column {
   max-width: 100%;
   opacity: 0;
   display: block;
   -webkit-transition: opacity 0.5s ease-in-out;
   -moz-transition: opacity 0.5s ease-in-out;
   transition: opacity 0.5s ease-in-out;
   position: absolute;
   height: 100%;

   &:hover {
      opacity: 1;
      cursor: pointer;
   }
}

#column_left {
   float: left;
   left: 0;
   width: 38.85%;
   background: url(images/1920/left.png) no-repeat 0 0 /cover;
}

#column_center {
   float: left;
   left: 0;
   right: 0;
   margin-left: 26.17%;
   width: 44.69%;
   background: url(images/1920/center.png) no-repeat center 0 /cover;
}

#column_right {
   float: right;
   right: 0;
   width: 39.58%;
   background: url(images/1920/right.png) no-repeat 100% 0 /cover;
}

【问题讨论】：

我建议只使用object-fit: cover; 来确保缩小视口的宽度会缩小到图像的中心，而不会缩小或拉伸它。
我不确定其他人是否难以理解您的问题，但为了提高您获得答案的机会，最好使用准确的占位符图像提供 sn-p/fiddle/codepen显示您的问题。

标签： css layout background tree contain

【解决方案1】：

你能明确你想要达到的目标吗？据我所知，您可能想从封面更改为包含背景大小？

background: url(images/1920/left.png) no-repeat 0 0 /cover;

到

background: url(images/1920/left.png) no-repeat 0 0;
background-size: contain;

【讨论】：