背景图像的纵横比，当数据是 image/jpeg;base64答案

【问题标题】：Aspect ratio for background-image, when data is image/jpeg;base64背景图像的纵横比，当数据是 image/jpeg;base64
【发布时间】：2014-12-17 00:44:45
【问题描述】：

我有一个div background-image 设置为data:image/jpeg;base64 格式：

<div style="background-image: url(data:image/jpeg;base64,/9j/4AAQ...

我想使用可用空间显示有关纵横比的完整图像。我通常会使用：

width: 90vw;
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

在这种情况下，图像使用完整的 div 大小进行拉伸。有什么建议么？

更新：带数据的div： http://jsfiddle.net/witepo/bksmhtwc/

更新 2：预期结果：http://1drv.ms/1uTj8Nd 分区：http://codepen.io/anon/pen/LEZPjj

【问题讨论】：

contain 应该尊重图像的纵横比。能否将完整的 Base64 编码图像数据添加到问题中？
我已经用数据添加了指向 div 的链接，它有点长，所以我无法在这里发布它
没问题。当我修改你的小提琴时，它对我来说似乎工作得很好：jsfiddle.net/BoltClock/bksmhtwc/3
我添加了图片和新的codepen以更好地显示问题
你能发布（一个模型）预期的输出吗？因为我看不出有什么问题。使用contain，图像将根据自身及其容器的比例，水平或垂直（但不能同时）适合。显示图像完全+完全填满容器的唯一方法是让容器与图像的纵横比相匹配。

标签： html css

【解决方案1】：

试试这个

background-size: cover;
background-repeat: no-repeat;
background-position: center center;

【讨论】：

谢谢，但我想展示整个画面
您能详细说明一下吗？我一直在使用背景尺寸：包含；有图像，效果很好