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 DEMO

样式：

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

使css背景图像响应

2 个答案: