保持相对宽度/高度元素答案

【问题标题】：Keeping Relative Width/Height Elements保持相对宽度/高度元素
【发布时间】：2014-04-18 01:46:43
【问题描述】：

我正在使用基于百分比的网格系统为我的个人网站构建一个页面，该页面使用相对定位的横幅和绝对定位的 div，该 div 水平位于横幅的中心，垂直位于横幅的底部。但是，由于上述 div 是网页的屏幕截图，因此保持其高度和宽度之间的相对关系非常重要，这样图像才不会变形。

下面是一个小代码和一个 jsfiddle -

<div id="aps-group-banner">
    <div id="aps-group-banner-wrap">
        <div class="screenshot-banner"></div>
    </div>
</div>


#banner {
    height:100%;  
    background:red;
}
#banner-wrap {
    position:relative;
    width:67%; height:100%; 
}
.screenshot {
    position:absolute;
    background:url(/img/case-study/aps-group/screenshot-banner.jpg) top left;
    background-size:100% 100%;
    width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}

http://jsfiddle.net/sHanf/

希望大家帮忙！提前致谢

利亚姆

【问题讨论】：

那么，我们应该如何提供帮助..？您至少可以发布该图片的在线链接或JSFiddle
哎呀！我忘了添加 jsfiddle，我现在用它的链接修改我的问题，提前谢谢！

标签： html css image web positioning

【解决方案1】：

也许我没有完全理解这个问题，但这是你需要的吗？

http://jsfiddle.net/RpW4r/

我刚刚将background-size 更改为100% auto;

【讨论】：

看来它成功了！我不太明白为什么？哈哈
嗯，你是说它是容器宽度的 100% 并自动调整高度（按比例）。
明白！你先生是个天才:) 再次感谢
没问题。很高兴我能帮上忙。 :)

【解决方案2】：

试试这个：

.screenshot {
  position:absolute;
  background: url(http://liamhodnett.com/img/case-study/aps-group/screenshot-banner.jpg) bottom left no-repeat;
  background-size:100% auto;
  width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}

这会将背景缩放到 100% 宽度并调整其高度以成比例，并将其移动到 .screenshot 元素的底部。

小提琴链接：http://jsfiddle.net/sHanf/7/

【讨论】：