2016-10-20 14 views
-1

最終的にここに触れます(今のところ)。画面の100%に収まるように画像と周囲のコンテナのサイズを変更するにはどうすればいいですか?

http://www.rfm-inc.comのホームページでは、実際の画像サイズより小さい画面サイズであれば、画面の100%を満たすようにヘッダー/(スライダー)画像と周囲のコンテナを設定するにはどうすればよいですか?ここで

は、私がこれまでに作ってみたものだが、それは私がそれをやりたいしません。実際の画像サイズを超える

.flexslider .slides img { 
 
    max-width: 100%; 
 
    display: block; 
 
}

、そこにする必要があります画像の両側の余白。

また、ソース画像の高さは1350であり、画像の歪みを生じさせることなく、画面サイズに合わせて高さを変更する必要があると考える必要があります。 I.E.、画面の高さが1350を下回ると、完全な高さの画像残りが隠れたり切り取られたりする。

私はそれが理にかなっていると思います。このようなことを説明するのは難しいです。前もって感謝します!

+1

助けを求めるコードのヘルプには、質問の中に** ** [** Stack Snippet **](https://blog.stackoverflow.com/2014/09/)のコードを再現するのに必要な最短コードが含まれている必要があります。 introduction-runnable-javascript-css-and-html-code-snippets /)があります。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが(http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

+0

よろしいですか。私はプロではないので、時にはそれは私にとっては難しいことです。尋ねることはたくさんあるようですが、ベストを尽くしました。 – nmeffert

答えて

0

display: blockが既に設定された画像を、センタリングするため、あなたはとして左右に余白の自動を使用する必要があります:あなたはそれが引き伸ばされたり歪まないたい場合は、画像にheight: autoを与えるべき

margin: 0 auto; 

。デフォルトでは、img要素を含むほとんどのhtml要素ではautoです。ビューポートの高さが1350 cssピクセルを下回ると、通常はスクロールバーが自動的に表示され、画像の下部はスクロールした後にのみ表示されます。その部分を切り取って、画像の一部が表示されないようにスクロールする場合は、画像をbackground-size: coverというコンテナdivの背景画像として使用する必要があります。

関連する問題