使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%)的值。