47

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

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を介してこれを達成する方法はありますか？

4

6 に答える 6

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

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

于 2012-07-31T11:55:19.193 に答える
14

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;
}
于 2012-07-31T08:51:26.433 に答える
0

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

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

于 2012-07-31T08:57:54.907 に答える
0

ええと、応答は簡単です

  • まず、cellという名前のクラスを作成し、次のプロパティを指定します。display:table-cell
  • その後、@ max-width:700pxdo{display:block; width:100%; clear:both}

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

PS：reset.cssスタイルシートはcssブラインドを作るものであり、そもそもデフォルトのスタイルを与えた論理的な理由がありました。

于 2014-01-23T08:15:15.987 に答える
0

私が見つけた最善の方法は、応答して表示する画像を背景画像として設定し、divのcssプロパティをカバーとして送信することでした。

background-image : url('YOUR URL');
background-size : cover
于 2017-04-09T19:23:12.570 に答える
-1

を使用しmax-width:100%;、次のようheight: auto;にdisplay:block;します。

image {
    max-width:100%;
    height: auto;
    display:block;
}
于 2016-08-02T21:36:10.553 に答える