html - CSSに比例して画像のサイズを変更しますか?

Question

CSSのみを使用して画像を比例的にサイズ変更(縮小)する方法はありますか?

私は JavaScript の方法でやっていますが、これが CSS で可能かどうかを確認しようとしています。

score 813 · Accepted Answer

CSS を使用して画像のサイズを比例的に変更するには:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

score 260 · Accepted Answer

サイズを制御し、比率を維持する :

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

score 66 · Accepted Answer

object-fitプロパティを使用できます。

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

これは、比率を変更せずにイメージに適合します。

score 50 · Accepted Answer

縦横比を維持して画像をスケーリングするには

これを試して、

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

score 30 · Accepted Answer

2015年に再訪：

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

すべての一般的なブラウザーが上記の Cherif によって提案された自動機能を備えているため、再検討しました。画像が高さよりも幅が広いかどうかを知る必要がないため、さらにうまく機能します。

古いバージョン: たとえば、120x100 のボックスに制限されている場合は、次のことができます。

<img src="http://image.url" height="100" style="max-width: 120px">

score 26 · Accepted Answer

<img style="width: 50%;" src="..." />

私にとってはうまくいきました...または何か不足していますか？

編集：ただし、誤ってサイズを大きくすることについてのショーンの警告を参照してください。

score 24 · Accepted Answer

css プロパティの max-width と max-heightはうまく機能しますが、 IE6ではサポートされておらず、IE7 だと思います。誤って画像を拡大しないように、これを高さ / 幅全体で使用することをお勧めします。最大の高さ/幅を比例して制限したいだけです。

score 19 · Accepted Answer

img{
    max-width:100%;
    object-fit: scale-down;
}

私のために働きます。大きな画像はボックスに収まるように縮小されますが、小さな画像は元のサイズのままです。

score 13 · Accepted Answer

この簡単なスケーリング手法を使用してください

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

score 4 · Accepted Answer

img {
    max-width:100%;
}

div {
    width:100px;
}

このスニペットを使用すると、より効率的な方法でそれを行うことができます

score 2 · Accepted Answer

これを試して：

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

score 1 · Accepted Answer

image_tag("/icons/icon.gif", height: '32', width: '32') 高さ: '50px'、幅: '50px' をイメージタグに設定する必要があります。 erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

html - CSSに比例して画像のサイズを変更しますか?

18 に答える 18

Related

Reference