1

PSD ファイルを CSS と HTML にカットする必要があります。問題は、背景画像のコンテナの幅が 1160px であることです。このコンテナの右側には背景画像しかないため、解像度が小さいと非表示になる可能性があります。メイン コンテンツ コンテナは 996px で十分です。

私はこのようにしようとしています：

  • 結果が 1160xXXX を超える場合は、右側に全体の画像を表示し、

  • 解像度が 1160xXXX 未満の場合、右側の画像のスマート部分を非表示にします。

右側の画像は常に同じ場所にある必要があります - .container .inner に関連しており、一緒に見栄えがします。

私のコード:

.container {
    max-width:1920px;
    margin:0 auto;
    position:relative;
}
.container .background {
    background:black url("../img/woman.png") no-repeat scroll right top;
    max-width:1160px;
    overflow:hidden;
}
.container .inner {
    width:996px;
}

目標は、背景画像を常に同じ場所に配置し、解像度が 1160px 未満の場合はこの画像をカットすることです。何かアドバイスはありますか？

編集：

.container .background が解像度に応じて位置を変更しない場合...私はそれを望んでいません-画像は常に同じ場所にある必要があります。

4

2 に答える 2

2

次のようなメディアクエリを使用します

@media only screen and (max-width:1160px){
  #something{
     some css
  }
}

メディア クエリの詳細については、こちらをご覧ください。

于 2013-07-02T17:30:42.740 に答える
1

モバイルおよびタブレットのブラウザーでよく使用される新しいアプローチの 1 つは、サイズの異なる画像のペアを使用することです。たとえば、レスポンシブ デザインでは、CSS@mediaを使用してデバイス ウィンドウの幅を確認し、状況に応じて大きいまたは小さい画像を返すことができます。

于 2013-07-02T17:29:28.153 に答える