Question

我使用基于百分比的网格系统为我的个人网站构建一个页面，该页面使用相对定位的横幅和一个绝对定位的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/

希望你们能帮忙！提前致谢

利安

Answer 1

尝试一下：

.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/

Answer 2

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

http://jsfiddle.net/RpW4r/

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

保持相对宽度/高度元素

2 个答案: