web-dev-qa-db-ja.com

Bootstrap Responsive Images Scaling

Twitter Bootstrapを使用していると、デフォルトで画像の応答性が向上します。これは素晴らしいことですが、常に完璧であるとは限りません。

たとえば、デスクトップに500x300の画像があるとすると、モバイル用にサイズが変更され、画像は非常に小さくなり、高さが低くなり、画像の詳細な部分の多くが失われます。

他のサイトが実際に画像をあまり拡大しない方法を見てきましたが、親divを使用して画像をmaskに並べ替えています。 （ http://www.fitnessfireworks.com はこの良い例でしたが、もう利用できません。）

これを達成するための最良の方法は何ですか？ CSS背景画像と背景画像のスケーリングの組み合わせ？ベストプラクティスを探しています。

csstwitter-bootstrapresponsive-designbackground-image
9
Nic Hubbard

他のサイトが実際に画像をあまり拡大しないが、親divを使用して画像をマスクする方法を見てきました。

言及したページのCSSを調べると、imline画像を使用するのではなく、通常、背景画像を使用してdivを定義し、CSSを使用していることがわかります。

#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}

インライン画像とbackground-imageのスケーリングを使用して完全に異なる結果を得る方法の例を次に示します。

http://www.bootply.com/67094

2番目の方法の鍵は、background-size：coverを使用して、divのサイズ（したがってbackground-imageのサイズ）を操作することです。

http://css-tricks.com/perfect-full-page-background-image/ には、background-coverを使用したバリエーションとオプションに関する情報があります。

15
David Taiaroa

this の記事が役立つかもしれません。レスポンシブディスプレイ用に画像を最適化し、複数の画像のダウンロードを回避する方法について説明します

1
Zim

画質が重要な場合は、異なるクラス宣言を使用して2つの画像を使用します。外部ツールは、ブラウザがオンザフライで実行するよりも常に画像のスケーリングに優れています。

0
Diodeus - James MacFarlane