简体   繁体   English

数据为image / jpeg时背景图像的宽高比; base64

[英]Aspect ratio for background-image, when data is image/jpeg;base64

I have a div with background-image set to data:image/jpeg;base64 format: 我有一个div ,其background-image设置为data:image/jpeg;base64格式:

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

I would like to show full image respecting aspect ratio, using available space. 我想使用可用空间来显示有关宽高比的完整图像。 I would normally use: 我通常会使用:

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

In this case image is stretched using full div size. 在这种情况下,将使用全div尺寸拉伸图像。 Any suggestions? 有什么建议么?

Update: Div with data: http://jsfiddle.net/witepo/bksmhtwc/ 更新:包含数据的Div: http : //jsfiddle.net/witepo/bksmhtwc/

Update 2: expected result: http://1drv.ms/1uTj8Nd Div: http://codepen.io/anon/pen/LEZPjj 更新2:预期结果: http : //1drv.ms/1uTj8Nd Div: http : //codepen.io/anon/pen/LEZPjj

try this 尝试这个

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM