58

大きなサイズの写真がいくつかあります。それらを親の寸法サイズに設定したいと思います。親の寸法が 1200x800 の場合、写真の寸法を 1200x800 に設定したいのですが、画像全体も表示したいと思います。親のサイズが 500x300 の場合、画像を 500x300 にしたいと考えています。

これは可能ですか？親の寸法に合わせて画像を縮小または拡大したい。

ありがとう！

4

7 に答える 7

89

必要な css プロパティは次のmax-widthとおりです。

CSS

img {
    max-width:100%;
}

画像の周りにコンテナを追加して、画像overflow:hiddenが定義された幅/高さよりも大きくならないように設定できます。

于 2013-03-08T14:04:46.070 に答える
16

次の css を使用して、画像をスケーリングします。

img {
    max-width: 100%;
    max-height: 100%;
}
于 2013-03-08T14:04:20.210 に答える
5

私は素朴かもしれませんが、これはこれほど単純ではありませんか?

img {
    width:100%;
    height:100%;
}
于 2013-03-08T14:04:57.247 に答える
3

画像タグでこれを試してください

<img src="url.jpg" width="100%" height="100%" />

または、要素の背景を画像として設定し、同じことを行います。

于 2013-03-08T14:04:39.867 に答える
1

max-width プロパティを使用してみてください。以前のバージョンの IE ではバグが発生する可能性がありますが、

#custom img {
    max-width: 100%;
    max-height: 100%;
}
于 2013-03-08T14:05:43.403 に答える
1

一般に、次のことを覚えておくと役立ちます。

1: トラックはコンテナーではありません。

2: グリッド領域はコンテナーではありません。

3: ネストされた要素は、コンテナとして宣言しない限り、コンテナではありません。

max-width: 100%、object-fit: containなどの宣言は、要素 (img など) がコンテナ内でどのように動作するかを記述します- たまたま配置されたトラックや領域内ではありません。コンテナ内にネストされたタグ。例：後

HTML:

<div class="myContainer">
    <div class="myTopRow">
        <img src="myPic.jpg">
    </div>
    <div class="myBottomRow">
        <span class="mySubText">Your subtext here.</span>
    </div>
</div>

CSS:
.myContainer {
    display: grid;
    grid-template-rows:  [row1Start] 1fr [row1End row2Start] 1fr [row2End];
    grid-template-columns: [col1Start] 1fr [col1End];
}

.myTopRow {
    grid-rows: row1Start / row1End;
    grid-columns: col1Start / col1End;    
}

.myBottomRow {
    grid-rows: row2Start / row2End;
    grid-columns: col1Start / col2End;
}

.myTopRow img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

1 つの列と 2 つの行で構成されるグリッドを作成しました。一番上の行の画像が 2 行目にはみ出して、その行のスパンされたテキストと衝突するように見えます。実際には、オーバーフローはありません。画像は一番上の行に含まれていません (これはコンテナーとして宣言されていませんが、「単に」トラックにまたがる領域です)。実際のコンテナー (2 行のボックス全体) 内に、イメージが完全に含まれています。

于 2021-07-16T13:14:27.047 に答える