web-dev-qa-db-ja.com

Webページの画像のサイズを2倍にするにはどうすればよいですか？

たとえば、320 x 240ピクセルのサイズの画像があり、Webページに2倍のサイズ（640 x 480ピクセル）で表示したいと考えています。以前は、imgタグにwidth=640を設定してこれを行っていました。

しかし、私は次のことを発見しました HTML仕様で ：

寸法属性は、画像を引き伸ばすために使用するためのものではありません。

その場合、仕様の意図に反することなく、Webページ上の画像のサイズを2倍にするにはどうすればよいですか？

javascripthtmlcssimagescaling
20
user200783

代わりにCSSを使用できます。頭に浮かぶ2つの方法は、widthまたは scale 変換を使用することです。

例えば。 _img { width: 640px; }_。これにより、高さを指定せずに適切なアスペクト比が維持されます。

_img {
  width: 640px;
}_
_<img src="http://www.placehold.it/320x240">_

例えば。 img { transform: scale(2) }

_img {
  transform-Origin: top left;
  transform: scale(2);
}_
_<img src="http://www.placehold.it/320x240">_
17
j08691

親画像コンテナのサイズを設定できます

.imageContainer {
  width: 640px;
  height: 480px;
}

img {
  width: 100%;
  height: 100%
}
<div class="imageContainer">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div>
7
brk

CSS経由で、理想的にはスタイルシートで、ただし必要に応じてstyle属性で。

たとえば、128x128に拡張された32x32のGravatarは次のとおりです。

.stretch-128 {
  width: 128px;
  height: 128px;
}
<img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&d=identicon&r=PG" class="stretch-128">

当然、そのような画像を引き伸ばすと、品質が低下する可能性があります。

5
T.J. Crowder

最初に、特定のサイズのdivWrapperという名前のクラスでdivを作成しました。次に、幅100％（divWapperにまたがる）の画像のクラスを作成し、高さautoを追加しました（高さを適切な比率に自動的に保つため）。 divWapperクラスに応じて画像のサイズを調整できます。

.divWrapper{
width:640px;
height:480px;
float:left;
}
//Now set you image class to 
.imageclass{  
width:100%
height:auto;
float:left;
}
<div class="divWrapper">
<image class="imageclass" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Picea_glauca_taiga.jpg">
<div>

これにより、ラッパーコンテナのサイズに関係なく、画像の比率が維持されます。

役立つメモ：

最初から高品質の画像が必要です。ベクター画像を使用することをお勧めします。私はPNGまたはSVGを使用することを好みます。 jpegなどよりも品質が良いです。ここに、画像拡張子について少し説明しているリンクがいくつかあります。

https://blog.online-convert.com/best-image-file-extensions/

https://www.sitepoint.com/gif-png-jpg-which-one-to-use/

3
Jonny

これを行うには、少なくとも4つの方法があります。

1. widthのimg属性を直接設定します

原則：画像の幅を変更します。

imgタグに_width: 640px; display: block_を設定します。

2. imgをdivでラップします

原則：親ノードから幅を継承します。

  1. div _width: 640px_
  2. img _display: block; width: 100%_

3.画像をdivの背景として設定します

原則：画像はもはやimgタグではなく、ノードの背景です。

  1. div background-image: url()、画像を背景画像として使用します。
  2. div _background-size: {2x width} {2x height}_、画像のサイズを変更します

4.画像を2倍に拡大縮小します

  1. transformプロパティをscale(2)に設定します。これは、元のサイズの2倍のサイズが必要であることを意味します。

ヒント：また、プロパティ_transform-Origin_を_top left_に設定して、（比較的）_top: 0; left: 0;_の位置から開始できるようにする必要があります。

スニペットを実行して見てください:)

_.method-1 {
  display: block;
  width: 640px;
}

.method-2 {
  width: 640px;
}
.method-2 img {
  display: block;
  width: 100%;
}

.method-3 {
  width: 640px;
  height: 480px;
  background-image: url(http://www.placehold.it/320x240);
  background-size: 640px 480px;
}

.method-4 {
  transform-Origin: top left;
  transform: scale(2);
}_
_<h1>method 1: img displays as block, width 640px</h1>
<img src="http://www.placehold.it/320x240" class="method-1" />

<br/>

<h1>method 2: parent dom width 640px, img width 100%.</h1>
<div class="method-2">
  <img src="http://www.placehold.it/320x240" />
</div>

<br/>

<h1>method 3: the img as div's background, use the background-size attribute to set 2x size.</h1>
<div class="method-3"></div>

<br/>

<h1>method 4: use CSS3 transform property to scale the image into 2x.</h1>
<p>tips: when we set `transform: scale(2);`, we also need to define the `transform-Origin` property to `top left`, in order that the image will align from top to bottom as well as from left to right, or it will lost itself. LOL.</p>
<img src="http://www.placehold.it/320x240" class="method-4" />_
1
Yuying Wu

これは、以下の2つの方法で実現できます。

<img class="xx" src="http://placehold.jp/150x150.png">

.xx {
zoom: 200%;
}
.xx {
 transform: scale(2);
}
1
Jaivijay

一般的に、クライアント側のテクノロジーを使用して画像をスケーリングする方法を提供する記事は見つかりませんでした（それを ブラウザーのメカニズム のままにします）。

そうは言っても、 HTML標準仕様 に従って画像を2倍にする最善の方法が必要な場合は、別の画像を使用するのが最善の答えです。バックエンドプロセスまたはPhotoshopを介して拡大された画像。ここで、ユーザーの画面に応じたアダプティブイメージが必要な場合は、おそらくこれがHTML標準で実現される実際のケースであるため、次のようになります。

<picture>
 <source srcset="http://www.placehold.it/320x240" media="(min-width: 600px)">
 <source srcset="http://www.placehold.it/640x480" media="(min-width: 900px)">
 <img src="http://www.placehold.it/160x120">
</picture>
1
Anastasios Selmanis

画像を読み込むときに避けたいことのリストは次のとおりです。

  • [〜＃〜] fouc [〜＃〜] -これは、ブラウザがロードする前に画像サイズを持っていない場合に発生します（この場合、完全にロードされるまでブラウザにスペースが割り当てられません） ）またはブラウザに間違ったサイズを伝える
  • 歪み（1：1とは異なるアスペクト比で画像を表示する）
  • ピクセレーション（ネイティブサイズよりも大幅に大きいサイズで画像を表示する）
  • ページのサイズよりも大幅に大きいネイティブサイズの画像を読み込む-ページの速度が低下し、不要な帯域幅を消費します

上記のそれぞれに対処する方法があります。

[〜＃〜] fouc [〜＃〜]を回避するには、いくつかの方法があります。

  • ファイル自体に加えて、画像のサイズ（または比率）を保存しておくと、画像を読み込む前にページフローに正しいスペースを割り当てることができます（たとえば、WPは箱から出してこれを行い、ほとんどのテーマはFOUCを回避するためにこれを使用します）
  • background-size: coverの背景画像として、画像をコンテナにロードします。したがって、画像がロードされる前に、ドキュメントは要素のサイズをすでに知っているため、FOUCは使用できません。この手法には、画像の読み込みに失敗したときに壊れた画像アンカーを表示しないという利点もあります。また、この手法は現在、フルスクリーン画像レイアウトで広く使用されており、視差効果を使用するものもあります。コンテナと画像のアスペクト比の違いによって、上/下または左/右をトリミングするという欠点があります。
  • 画像をposition:absolute中央のコンテナに読み込み、サイズが決まったら（ドキュメントフローの正確な位置を計算できるようになったら）、スケールを0から1にアニメーション化し、コンテナサイズを「デフォルト」から適切なサイズにアニメーション化します。 。

歪みに関しては、そうしないことを除いて、言うことはあまりありません。トリミング、ピクセル化、さらにはFOUCなど、他のオプションは歪みよりも優れています。歪みは基本的に次のように述べています：「設計タスクで私を信用しないでください-私はドンから行うことを区別できません」-これは、多くの場合、次のように解釈されます：「私はプロのフロントエンド開発の資格がありません。おそらく知らないうちに、私の道に来るウェブサイトを台無しにします」。

オンピクセレーション。これは注意が必要です。ページをできるだけ速く読み込むだけでなく、鮮明な画像も必要です。非常に大きな背景画像を扱う場合、巧妙なトリックは、画像の上にパターンを追加することです（ストライプ、ドット、またはその他のそのような半透明のパターン-ピクセル化をはるかに目立たなくするための芸術的なタッチ）。

両方の世界（速度と画質）を最大限に活用するためのもう1つの優れたスマートな手法は、次のとおりです。

  • スクロールせずに見える範囲のすべての画像に比例したサムネイルバージョンを読み込み（はい、ピクセル化されたように見えます）、.65不透明度で表示します。スクロールして表示する前に、フルサイズの画像を遅延読み込みします。ピクセル化されたバージョンが少しの間表示されても、フルサイズのバージョンに置き換えられ、不透明度を1に変更するとともに、フォーカスイン効果を作成します。高品質で優れた画像がある場合は、（a）目立つため、b）適切で鮮明なサイズで画像を読み込みたいため、この効果が本当に必要です。画像は「生きている」ように見え、微妙な焦点が当てられ、訪問者は非常に洗練されたWebサイトを見ているような印象を与えます。

オーバーサイズは避けてください。ここでsrc-setが機能し、上記のサムネイルローダーと組み合わされます。そしてもちろん、遅延読み込み。スクロールせずに見える範囲では、常に遅延読み込みを行ってください。それは大きな違いを生みます。

要するに、それはあなたが正しく画像をロードする方法です。実際には、これは大きなテーマです。最適化、ラスターとベクター、svgまたはwebp形式については触れていません。

1
Andrei Gheorghiu

次のJavaスクリプトコードを使用して、コンテナに最適な画像を拡大縮小します。必要に応じて変更を加えることはほとんどありません。

function scaleImage(container, image) {
var c = document.getElementById(container);
var i = document.getElementById(image);
var newSize = scaleSize(c.clientWidth, c.clientHeight, i.width, i.height);
i.style.width = newSize.width;
i.style.height = newSize.height;
c.style.backgroundColor = "transparent";
c.style.border = "none";
var intHeight = ((100-((parseFloat(i.style.height)/87)*100))/2);
var strHeightPercentage = intHeight.toString().concat("%");
c.style.top = strHeightPercentage;}

関数scaleSize（maxW、maxH、currW、currH）{var ratio = currH/currW;

if (currW >= maxW && ratio <= 1) {
    currW = maxW;
    currH = currW * ratio;
}
else if (currH >= maxH) {
    currH = maxH;
    currW = currH / ratio;
}
return { width: currW, height: currH };

}

0
Sandeep

寸法属性は、画像を引き伸ばすために使用するためのものではありません。

すでに述べたように、width属性を使用しても、画像が引き伸ばされることはありません。したがって、その場合はtransform: scale(2);を使用する必要がありますが、これは他のコンテンツと重複する画像に関して競合する可能性もあるため、cssプロパティで2倍にスケーリングされた画像でdivの2倍の幅を使用することをお勧めします 'transform: scale(2);'

したがって：以下のスタイルを使用することをお勧めします。

.img2x_container {
    width: 640px;
    height: 480px;
}

.img2x_container img {
    transform: scale(2);
}

この使用例は、画像の高さと幅がわかっている場合にのみ役立ちます。

0
Deepanshu Sukhija

あなたはそれを多くの様々な方法で行うことができます。しかし、何をするにしても、最初に画像をダウンロードして、2倍のサイズを意味するようにします。そうしないと、サイズを2倍にすると、ピクセル化されるか、色あせて見えます。

  image{ transform: scale(2); }

  1. 画像を2倍のサイズに変換してみてください

  2. CSSで画像の幅を設定してみてください

  3. setAttribute（ "width"、 "size"）を使用してJavaScriptを試してください

0
Pranab

以前の解決策のほとんどが好きですが、ここでの問題は、現在の画像サイズが実際には2倍になるかどうかわからないことです!!

だから、私の解決策はちょっと動的で、あなたのウェブサイトの他の画像にも影響を与えません。また、必要に応じて、サイズをtripleに拡張することもできます。

ライブプレビューはこちら を確認してください。

または、以下をお読みください。

HTML

<img class="resize-double" src="https://placeimg.com/100/50/nature">
<img src="https://placeimg.com/200/100/nature">

JavaScript

// Select all images to be resized
const toResizeImgs = document.querySelectorAll(".resize-double");

// Loop over those images and double their size
for(let i=0; i < toResizeImgs.length; i++) {
  toResizeImgs[i].style.width = toResizeImgs[i].offsetWidth * 2 + "px";
  toResizeImgs[i].style.height = toResizeImgs[i].offsetHeight + "px";
}

クラスresize-doubleの画像を選択し、ループして、幅/高さを現在の2倍に変更します。

注：offsetWidthとoffsetHeightの両方が、マージン、パディングを含む現在の幅/高さを返しますとボーダー。自分に合わない場合は、必要に応じてclientWidthとclientHeight、またはscrollWidthとscrollHeightを使用できます！

0
Elharony

CSSトリック、1つのプロパティのみを設定

CSSを使用したい場合は、本当に良い方法があります。

img#image_id {
    width: calc(2 * 320px);
    height: auto; /* This can be omitted */
}

これは非常に便利で、1つの数値（つまり係数）を変更するだけで画像のスケールを変更できます。画像の高さの心配はありません。画像の高さをautoに設定しなくても、ブラウザによって自動的に設定されます（autoは幅と高さのデフォルト値であるため。 this および this ）。また、幅を設定する代わりに高さを設定することもできます。

ある意味レスポンシブデザインに役立つと思いますが、本当にトリッキーだと思います！

注：親の幅または高さを設定した場合、フレックスボックスでは機能しません。この場合、幅と高さを明示的に設定する必要があります。そうしないと、別のトリックが発生します。フレックスボックスの動作はまったく異なります。

0
MAChitgarha

私の経験から、ウェブサイトで使用するために画像のサイズを2倍にする最良の方法は、Photoshopなどのプログラムで実際に画像を2倍にしてから、アップロードすることです。画像サイズ、網膜スクリーンのピクセル密度、およびさまざまな画面サイズの過多により、画像の操作は以前よりも少し高度になりますが、それほど難しいことではありません。

次の例を確認してください。

<picture>
  <source
    sizes="(width < 32em) contain, (width >=32em) contain 80vw calc(100vh - 10em)"
    srcset="full.jpg 2048h 1024w, half.jpg 1024h, quarter.jpg 512h, eighth.jpg 256h" />
  <img src="eighth.jpg" alt="rose flower!" />
</picture>

少なくともFHD以上の比較的大きな画像をアップロードしてから、「sizes」と「srcset」を使用して設定します。どちらを画面のサイズ/タイプに応じてロードします。このようにして、大小を問わず、あらゆる潜在的な解像度をカバーし、常に最高のバージョンの画像を表示します。確かに、アップロード前にすべての画像で手作業が行われることは認めますが、最終的な結果はそれだけの価値があります。

同じ小さな画像ファイルを保持し、コーディングを使用してそれを2倍にすることを主張する場合、最良の方法は、CSSクラスを画像に追加し、そのクラスで2倍の寸法を指定することです。

これは、画像のsrcset、サイズ、およびなぜこのようにする必要があるのか​​についての面白くて良い説明です。 srcsetに関する楽しい記事

0
Theodor_D.

変換->スケールを利用できます

img#imagId {
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari 3-8 */
    transform: scale(2);
}
0
elegant-user

このようにjavascriptを使用して、画像サイズを2倍に変更できます。

このJsFiddleデモを確認してください

<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
    var img = $("#sky");
    // Create dummy image to get real size
    $("<img>").attr("src", $(img).attr("src")).load(function(){
        var realWidth = this.width;
        var realHeight = this.height;
        alert("Original width=" + realWidth + ", " + "Original height=" +     realHeight);
        var newWidth = realWidth * 2;
        var newHeight = realHeight * 2;
        $("#sky").width(newWidth);
        $("#sky").width(newHeight);
         alert("new Image Size" + newWidth+"x"+newHeight);
    });
});   
});
</script>
</head>
<body>
<img src="https://www.cluedin.net/images/providers/stackoverflow.png" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <p><button type="button">Get Original Image Size And Double it</button></p>
</body>
</html>
0
Rj_Innocent_Coder

さて、あなたはcssを使用して、ストレッチを避けることができます。

img{ width:640px; background-size: cover; height:auto;}

これにより、適切な高さで画像が均等に引き伸ばされます。高さを特定の数値に設定してみることもできます。

0
Arek Zedi

最も最適な方法は、最大の画像をサイトにロードし、ダウンスケール必要な場所に[〜＃〜] css [を介してロードすることです。 〜＃〜]。

1）アップスケーリングすると画像が歪むため、画像に最適な品質。

2）異なるサイズの画像をさらにロードする必要はありません

3）ダウンスケーリングは画像を損なうことはなく、[〜＃〜] css [〜＃〜]のほんの数行です

より大きな画像をロードしたくない場合、2番目に優れた最速の解決策はCSSを介して画像をアップスケールすることです。 Width属性は<img>では機能しなくなりました

0
Datsos