CSS：スクロール可能な画像をユーザーのウィンドウの100％に拡大

私はデザイナーのモックアップを私の同僚と共有して承認したいのですが、画像をブラウザーの幅に合わせてアクセスしてもらいたいのですが、。CSS：スクロール可能な画像をユーザーのウィンドウの100％に拡大

私は、次のCSSコードを使用することにより、これを行うことを試みた：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
    margin:0; 
} 
html, body, .image { 
    position:relative; 
    width:100%; 
    background-image:url('05.jpg'); 
    background-size:cover; 
} 
</style> 
</head> 
<body> 
<div class='image'></div> 
</body> 
</html>

The resultは幅100％を満たすが、隠されたimageの残りの部分を維持、スクロールを許可しない画像です。ページの幅のみを塗りつぶすことはできますが、残りの画像をスクロールするにはどうすればよいですか？

私はこれと似ていると感じましたが、questionというコードを使用して動作させることができませんでした。

出典

2017-06-28 n3rve

は、なぜあなたはちょうどこのような定期的なイメージとして画像を使用していない：

body { 
 
    margin: 0; 
 
} 
 

 
.x > img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<body> 
 
    <div class='x'> 
 
    <img src="http://placehold.it/2000x2500/fc0"> 
 
    </div> 
 
</body>

ここ

は、同じコードでcodepenです（スニペットは、現在、エラーメッセージ「使用できないサービスが表示されます"）：

https://codepen.io/anon/pen/XgVBKg

出典

2017-06-29 00:09:46 Johannes

こんにちは、ありがとうございます。 [あなたが提案したことをする]（http://dl.n3rve.com/econnect-mockups/）は、必要に応じてスクロール可能な背景イメージを読み込みますが、100％の幅には適合しません。 – n3rve

あなたはそれを私が記述したやり方ではしませんでした：CSSセレクタはDIVではなく画像に幅が適用されるように '.x> img {...}'（ '.x'だけでなく）でなければなりません。 – Johannes

:)ありがとうございました。 – n3rve

CSS：スクロール可能な画像をユーザーのウィンドウの100％に拡大

答えて

関連する問題