1

レスポンシブ画像技術を使用しています。これは、最大幅を100％に設定して、画面の解像度/サイズに応じて画像のサイズを変更することです。ただし、パーセンテージ幅のあるdiv内に画像を配置すると、画像は鮮明に表示されません（推測しているので、ブラウザーを介してサイズ変更されています）。画像のテキストはかなりぼやけています。鮮明に見えるようにする方法はありますか？または、少なくとも最も一般的な画面サイズで鮮明に見えるようにするには？

CSS：

img {
  max-width: 100%;
  height: auto;
}

.img-container {
  width: 57%;
}

HTML：

<div class="img-container">
  <img src="[img source]" width="700" height="500" />
</div>
4

3 に答える 3

5

縮小されている大きな画像がある場合は、最初にベクターグラフィックプログラムでサイズを変更してから、希望のサイズとして保存し、それをクライアントに提供します。

拡大されている小さな画像がある場合、解像度が失われ、オプションはありません。

これは実際にはCSS/HTMLの問題ではなく、参考までに、スケーリングの問題です。さまざまなブラウザがさまざまなスケーリングアルゴリズムを使用するため、結果に一貫性がありません。コントロールをつかんで、拡大縮小せずにブラウザに必要な画像を表示させる必要があります。「レスポンシブデザイン」の理論的な美しさに対する実際的な欠点の1つ。

于 2012-08-10T02:20:18.593 に答える
0

写真以外の画像がある場合はSVGを使用してください

写真にはslimmage.jsを使用してください。

2013年の解像度範囲をサポートするために14の画像バージョンを手動でエクスポートするのは狂気です。

于 2013-07-08T17:17:01.697 に答える
0

SVG画像を使用するか、picturefillと呼ばれるプラグインを使用します。

于 2013-07-08T17:25:46.230 に答える