-1

このページのようなヘッダー画像をコーディングしようとしています: http://www.eltrecetv.com.ar/nosotros-a-la-manana . ページのサイズを変更すると、男の画像がどうなるかに注意して ください。それは同じ場所にとどまり、常に中央に配置され、切り取られません (少し下にありますが、とにかくそれほどではありません)。これが私の謙虚で簡潔なコードです：（そしてここにもフィドルがあります：https://jsfiddle.net/wvep5ga1/）

html:

<div class="outer">

</div>

CSS:

.outer{
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size:cover;
    background-origin:padding-box;
    background-position:top center;
    min-height:386px;        
}

私が見つけた問題は、ブラウザー ウィンドウのサイズを変更すると、常に肩が見える元のページとは対照的に、div が圧縮されて男性の顔だけが見えるようになることです。これを正しく説明しているかどうかはわかりませんが、基本的にウィンドウのサイズを変更すると、元のページよりも div の高さがはるかに速く変化し、ページの残りの部分に影響を与えます。常に同じ場所にとどまり、常に同じ縦横比でなければなりません。アスペクト比の問題は解決しましたが、ウィンドウのサイズ変更時に div の高さが圧縮および拡張されすぎるという問題があります。

元のページは Drupal 7 を使用して作成されたと思います。しかし、私が欲しいのは、まさにそれを行う CSS スニペットです。私はそれが可能であることを知っています、私は何時間もすべてを試しましたが、何かが欠けています. 元のページで解像度の異なる多くの画像が使用されていることは知っていますが、それは問題ではありません。

誰かが助けてくれることを願っています。コメントをお待ちしております。

前もって感謝します！

4

1 に答える 1

1

更新されたフィドルを参照してください: https://jsfiddle.net/wvep5ga1/3/

追加するだけ

background-size: 100%;
background-repeat: no-repeat;

このような：

.abc{    
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-position:top center;
    min-height:386px;        
}
于 2016-02-19T17:59:35.950 に答える