web-dev-qa-db-ja.com

最大幅をパーセントおよびピクセルとして設定するにはどうすればよいですか？

Divの幅がパーセントとピクセルを超えて拡大するのを防ぐにはどうすればよいですか？つまり、ブラウザーはパーセントのピクセル値を計算し、2つの値のうち低い方を選択する必要があります。

両方を次のように設定した場合：{max-width:100px;max-width:20%;}アセットパイプラインは2番目のものを選択し、最初のものを無視します。

htmlcsscss3asset-pipeline
36
Joe Morano
width:20%;
max-width:100px;

これにより、幅が20％に設定されますが、100ピクセルに制限されます。

37
JJJ

これを達成する1つの方法は、単に2つのdivを使用することです

<div class="outer">
  <div class="inner">
    This content will not exceed 100px or 20% width.
  </div>
</div>

<style>
.outer {
  max-width: 90%;
}
.inner {
  max-width: 100px;
}
</style>
22
Jason Axelson

これは[〜＃〜] not [〜＃〜]異なる画像サイズ/アスペクト比で動作します。 max-widthおよびmax-heightを個別に定義できます。画像のサイズを知る。特定の画像グループに対してこのメ​​ソッドを使用しますが、一般的なルールとしては使用しません。

実際の例：携帯電話から5枚の写真をページに配置し、画面の残り半分にテキストを配置する必要があります。画像のサイズを幅500ピクセル、高さ300ピクセルに縮小します。画面の半分を超えず、タブレットで250ピクセル以下にする必要があります。最大高さを計算します：250 * 300/500 = 150px。

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    }
}

最新のChrome、Firefox、およびIEでテスト済み。

7
Kiaurutis

同様の解決策を必要とする特定の問題がありました。すべての画像（アスペクト比、位置、または追加のHTMLマークアップとは無関係）を元のサイズで、設定された最大幅（ピクセル単位）まで表示する必要がありました。画面がこの固定サイズよりも小さい場合は、収まるように縮小する必要があります。つまりwidthを設定しても要件を満たしません。

@Kiaurutisの答えを拡張するには：

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

実際の例は、ここにあります： https://jsfiddle.net/vrehxmpx/ 。この例では、400ピクセルより大きい画像（常に縮小）としきい値より小さい画像（画面が画像より小さい場合のみ縮小）があります。

画像上にある余白、境界線などを調整するには、@mediaのmax-width。

4
Druckles

これをしないでください。

選択した答えは、OPが説明するシナリオに対して正しいと思います。ただし、一部のコメントでは、OPがmax-widthプロパティは、widthではなく、2つの値の低い方になります。これも実行できます。以下を参照してください。

注：この解決策はあまり意味がありません。選択された答えを使用してください。max-widthが何のために作られたかを正しく示しています。以下のコードにより、max-widthプロパティは、20％または100pxのうち小さい方です。

img {
    max-width: 20%;
}

@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
    img {
        max-width: 100px;
    }
}
0
Aaron Cicali

サイトで同じ幅の「ページラップ」を使用しました。デフォルトでは幅を95％にしたかったが、1280px以下にしたかった。 CSSで作成した方法を次に示します

.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
0
Ph Abd