web-dev-qa-db-ja.com

CSSを使用したレスポンシブ画像

画像のサイズを変更してレスポンシブにするのは難しいと感じています。

Webサイトをレスポンシブバージョンに自動的に変換するphpアプリケーションを開発しています。画像に少しこだわっています。

Webサイト上のすべての画像にラッパークラスを追加し、画像のサイズを非常に適切に変更できました。

私の問題は、ロゴやアイコンなど、ウィンドウよりも自然に小さい画像にあります。これらのサイズを変更したくありません。

私のコードは現在変換しています：

<img src="[src]" />

に：

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

次のCSSを使用する場所：

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

これはすべての画像のサイズを変更しますが、ページの幅を超える画像のサイズを変更するだけです。 CSSを介してこれを達成する方法はありますか？

cssimageresponsive-design
43
Dan Hanly
.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

私のために働いた。
MrMisterManの支援に感謝します。

86
Dan Hanly

画像にもmax-widthを使用します。変化する：

.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

に...

.erb-image-wrapper img{
    max-width:100% !important;
    max-height:100% !important;
    display:block;
}
14
punkrockbuddyholly

私が見つけた最良の方法は、レスポンシブに表示したい画像を背景画像として設定し、divのcssプロパティをカバーとして送信することでした。

background-image : url('YOUR URL');
background-size : cover
0
Naseeruddin V N

小さい場合は最初にphpで画像をチェックし、ロゴの標準サイズは他のcssクラスを提供し、サイズを変更しないでください

間にスクリプトを作成する必要があると思います

0
Sahil Popli

応答性はシンプルです

  • 最初にcellという名前のクラスを作成し、display:table-cellのプロパティを与えます
  • @ max-width:700px do {display:block; width:100%; clear:both}

それは絶対的なdivではありません。 divは100％にする必要があり、それからmax-width: - desired width -が内側のフレーミングに必要です。真のレスポンシブサイトには、9行未満のcssがあり、あなたがたわごとの世界にいて、複雑なものの上にあるものはすべて渡されます。

PS：reset.cssスタイルシートは、CSSを盲目にするものであり、そもそもデフォルトスタイルを与えた論理的な理由がありました。

0
Ben Edwards