左側のクラスの背景として画像を使用し、背景は白です。クラスの幅は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;
}
これは私のコードです
ここにあなたの要求のためのjsフィドルトライがあります：
スタイル：
.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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加