web-dev-qa-db-ja.com

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

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

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

htmlcssimage-resizing
634
codingbear

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

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

サイズを制御し、比率を維持します。

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

背景画像の場合は、background-size：containsを使用します。

Cssの例：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}
105
lenooh

やってみる

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
69
orome

width:50%はイメージのサイズを利用可能なスペースの50％に変更し、max-width:50%はイメージのサイズをその自然サイズの50％に変更します。これは、モバイルWebデザインにこの規則を使用するときに考慮することが非常に重要であるため、モバイルWebデザインには常にmax-widthを使用する必要があります。

48
andreszs

縦横比を維持して画像を拡大縮小するには

これを試して、

img {
  max-width:100%;
  height:auto;
}
45
Prasanth K C

object-fit propertyを使用できます。

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

これは比例して変更することなく、画像にフィットします。

39
Andrii Bogachenko

2015年に再訪

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

すべての一般的なブラウザが上記のCherifによって提案されたautoを自動で動作させるようになったので、私はそれを再検討します。

古いバージョン：例えば120x100の箱で制限されているならあなたはできる

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

Cssプロパティのmax-widthとmax-heightは、 great と動作しますが、IE6ではサポートされていません。IE7と信じています。誤って画像を拡大しないように、高さ/幅を超えてこれを使用したいと思うでしょう。あなたはちょうど比例して最大の高さ/幅を制限したいと思うでしょう。

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

私のためにうまく働いた...または私は何かが足りないのですか？

編集する しかし、偶然にサイズが大きくなることについてのShawnの警告を見てください。

22
Adrien

この簡単なスケーリング手法を使う

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}
13
Geniusknight
img{
    max-width:100%;
    object-fit: scale-down;
}

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

11
pheon

これが最も簡単な方法であり、<img>タグ内のインラインstyle属性を使用して使用することも可能です。

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

または

<img src="flower.png" style="transform: scale(0.7);">
5
cREcker
img {
    max-width:100%;
}

div {
    width:100px;
}

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

4
Lenin Zapata P

メディアクエリとレスポンシブデザインの原則を使用して、ブラウザでCSSを使用して画像のサイズを変更できます。

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}
4
Moh K

あなたはいつもこのようなものが必要です

html
{
    width: 100%;
    height: 100%;
}

あなたのcssファイルの一番上に

2
MikeStr

これを試して：

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

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

image_tag("/icons/icon.gif", height: '32', width: '32') imageタグにheight： '50px'、width： '50px'を設定する必要があります。このコードは最初から試してみてください。 .erb：
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

1
neo7