ウェブサイトのある部分の画像は、ページ全体を占めます

私は楽しいためにウェブサイトを再設計しています。私はいくつかのJQueryといくつかのCSS効果を使いこなしていました。矢印をクリックすると、ページのすべてがプッシュダウンされ、ビデオが表示されます。問題は私が画像のセクションを作成しようとしていることです。ただし、カバーする画像の背景サイズを変更すると、画像全体が画面に表示されます。手動で画像のサイズを変更すると、画像がゆがんで表示されます。ここでウェブサイトのある部分の画像は、ページ全体を占めます

はHTMLである：ここでは

<section id="content"> 
    <img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466799500/background_image_mjh10z.jpg"class="stuff"> </img> 
    <h1>Click the arrow to view Kai Greene's Scar Story</h1> 
<span class="msg"><button = class="btn btn-danger">Sign up for our News Letter</button></span> 

</section> 
<article class="buy"> 
    <h1 class="products text-center">View other products</h1> 
</article> 
</div>

はCSSです：

.stuff{ 
    margin-top: 100px; 
    background-soze: cover; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
}

あなたはcodepen上のコード全体を表示することができます。http://codepen.io/sibraza/pen/wWgqBO

出典

2016-06-24 Codes316

'background-soze'？スペルをチェックしてみてください。また、画像サイズに 'width'や' height'を使うこともできます。 'background-size'は必要ありません。 'object-fit：cover'を使うと、設定した幅や高さにかかわらず画像の縦横比を保つことができます。 –

あなたはそのクラスをイメージに追加しています - これは実際には意味がない/それは背景イメージにはなりません – Johannes

代わりのbackground-sizeにサイズ画像のための有用なリソースです。 object-fit: coverを使用して、設定したサイズに関係なく画像のアスペクト比を維持することもできます。そのような "トリミング"効果を行うように。

出典

2016-06-24 22:27:01

それはあなたのことをとてもうまくいきました。 – Codes316

@ Codes316 あなたは歓迎です。私はあなたが私の答えをupvote場合でもそれを感謝します。 :) –

おそらくサイズを変更する必要があります画像の手動で幅を特定の値に設定し、高さをautoに設定するか、またはheightをautoに設定してもイメージを歪ませてはいけません。したがって、幅または高さのいずれかをautoに設定すると、画像が歪まないようにしてください。

http://www.w3schools.com/css/css_rwd_images.aspは、ご希望の画像サイズを設定するwidthまたはheightを使用して、CSS

出典

2016-06-24 22:24:34

ウェブサイトのある部分の画像は、ページ全体を占めます

答えて

関連する問題