使CSS背景图像响应

Question

我将图像用作左侧带有白色背景的课程的背景。 类的宽度为1368px，图像大小为392px或高度为600px，我想将此图像固定在此类的左侧，以作为响应。 我将此图像设置在左侧，但在响应页面中无法正常工作，因为仅图像在响应设备中显示，如屏幕大小为700px。 我如何解决此问题，请帮助我。 非常感谢

.about-middle { 
    width: 100%;
    margin: 0px auto; 
    max-width: 1368px; 
    background: url(../images/right-side.jpg) left #fff; 
    overflow: auto; 
    max-height: 603px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover;  
    -o-background-size: cover;
    background-size: cover;
}

这是我的代码

Answer 1

这是js小提琴尝试您的请求：

JSFIDDLE演示

样式：

.main {
   padding:50px 0; 
   position:absolute; 
   top:0; 
   bottom:0; 
   left:0; 
   right:0;
   background-color : blue;
   color : white;    
}
.inner {
    width : 30%;
    float:right;
    height:30%;
    background-color : red;
    background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0);
    color : white;  
}
.fixedpos {
    width : 200px;
    float:left;
    height:200px;
    background-color : red;
    background: url('http://www.w3blender.com/codecanyon/bgstretcher/sample-images/sample-4.jpg') no-repeat scroll left center / 100% 100% rgba(0, 0, 0, 0);
    color : white;  
}

HTML：

<div class="main">
    main div
    <br><br><br>
    <div class="inner">
        responsive
    </div>
    <div class="fixedpos">
        fixed pos
    </div>    
</div>

Answer 2

嗨，您必须使用background: url(../images/right-side.jpg) no-repeat scroll left center / 81% 100% rgba(0, 0, 0, 0)在您的背景中。 并根据屏幕尺寸更改x(81%)的值。