たとえば、320 x 240ピクセルのサイズの画像があり、Webページに2倍のサイズ(640 x 480ピクセル)で表示したいと考えています。以前は、img
タグにwidth=640
を設定してこれを行っていました。
しかし、私は次のことを発見しました HTML仕様で :
寸法属性は、画像を引き伸ばすために使用するためのものではありません。
その場合、仕様の意図に反することなく、Webページ上の画像のサイズを2倍にするにはどうすればよいですか?
代わりに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">
_
親画像コンテナのサイズを設定できます
.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>
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">
当然、そのような画像を引き伸ばすと、品質が低下する可能性があります。
最初に、特定のサイズの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などよりも品質が良いです。ここに、画像拡張子について少し説明しているリンクがいくつかあります。
これを行うには、少なくとも4つの方法があります。
width
のimg
属性を直接設定します原則:画像の幅を変更します。
img
タグに_width: 640px; display: block
_を設定します。
img
をdiv
でラップします原則:親ノードから幅を継承します。
width: 640px
_display: block; width: 100%
_div
の背景として設定します原則:画像はもはやimg
タグではなく、ノードの背景です。
background-image: url()
、画像を背景画像として使用します。background-size: {2x width} {2x height}
_、画像のサイズを変更します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" />
_
これは、以下の2つの方法で実現できます。
<img class="xx" src="http://placehold.jp/150x150.png">
.xx {
zoom: 200%;
}
.xx {
transform: scale(2);
}
一般的に、クライアント側のテクノロジーを使用して画像をスケーリングする方法を提供する記事は見つかりませんでした(それを ブラウザーのメカニズム のままにします)。
そうは言っても、 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>
画像を読み込むときに避けたいことのリストは次のとおりです。
上記のそれぞれに対処する方法があります。
[〜#〜] fouc [〜#〜]を回避するには、いくつかの方法があります。
background-size: cover
の背景画像として、画像をコンテナにロードします。したがって、画像がロードされる前に、ドキュメントは要素のサイズをすでに知っているため、FOUCは使用できません。この手法には、画像の読み込みに失敗したときに壊れた画像アンカーを表示しないという利点もあります。また、この手法は現在、フルスクリーン画像レイアウトで広く使用されており、視差効果を使用するものもあります。コンテナと画像のアスペクト比の違いによって、上/下または左/右をトリミングするという欠点があります。position:absolute
中央のコンテナに読み込み、サイズが決まったら(ドキュメントフローの正確な位置を計算できるようになったら)、スケールを0から1にアニメーション化し、コンテナサイズを「デフォルト」から適切なサイズにアニメーション化します。 。歪みに関しては、そうしないことを除いて、言うことはあまりありません。トリミング、ピクセル化、さらにはFOUCなど、他のオプションは歪みよりも優れています。歪みは基本的に次のように述べています:「設計タスクで私を信用しないでください-私はドンから行うことを区別できません」-これは、多くの場合、次のように解釈されます:「私はプロのフロントエンド開発の資格がありません。おそらく知らないうちに、私の道に来るウェブサイトを台無しにします」。
オンピクセレーション。これは注意が必要です。ページをできるだけ速く読み込むだけでなく、鮮明な画像も必要です。非常に大きな背景画像を扱う場合、巧妙なトリックは、画像の上にパターンを追加することです(ストライプ、ドット、またはその他のそのような半透明のパターン-ピクセル化をはるかに目立たなくするための芸術的なタッチ)。
両方の世界(速度と画質)を最大限に活用するためのもう1つの優れたスマートな手法は、次のとおりです。
.65
不透明度で表示します。スクロールして表示する前に、フルサイズの画像を遅延読み込みします。ピクセル化されたバージョンが少しの間表示されても、フルサイズのバージョンに置き換えられ、不透明度を1
に変更するとともに、フォーカスイン効果を作成します。高品質で優れた画像がある場合は、(a)目立つため、b)適切で鮮明なサイズで画像を読み込みたいため、この効果が本当に必要です。画像は「生きている」ように見え、微妙な焦点が当てられ、訪問者は非常に洗練されたWebサイトを見ているような印象を与えます。オーバーサイズは避けてください。ここでsrc-set
が機能し、上記のサムネイルローダーと組み合わされます。そしてもちろん、遅延読み込み。スクロールせずに見える範囲では、常に遅延読み込みを行ってください。それは大きな違いを生みます。
要するに、それはあなたが正しく画像をロードする方法です。実際には、これは大きなテーマです。最適化、ラスターとベクター、svgまたはwebp形式については触れていません。
次の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 };
}
寸法属性は、画像を引き伸ばすために使用するためのものではありません。
すでに述べたように、width属性を使用しても、画像が引き伸ばされることはありません。したがって、その場合はtransform: scale(2);
を使用する必要がありますが、これは他のコンテンツと重複する画像に関して競合する可能性もあるため、cssプロパティで2倍にスケーリングされた画像でdivの2倍の幅を使用することをお勧めします 'transform: scale(2);
'
したがって:以下のスタイルを使用することをお勧めします。
.img2x_container {
width: 640px;
height: 480px;
}
.img2x_container img {
transform: scale(2);
}
この使用例は、画像の高さと幅がわかっている場合にのみ役立ちます。
あなたはそれを多くの様々な方法で行うことができます。しかし、何をするにしても、最初に画像をダウンロードして、2倍のサイズを意味するようにします。そうしないと、サイズを2倍にすると、ピクセル化されるか、色あせて見えます。
image{ transform: scale(2); }
画像を2倍のサイズに変換してみてください
CSSで画像の幅を設定してみてください
setAttribute( "width"、 "size")を使用してJavaScriptを試してください
以前の解決策のほとんどが好きですが、ここでの問題は、現在の画像サイズが実際には2倍になるかどうかわからないことです!!
だから、私の解決策はちょっと動的で、あなたのウェブサイトの他の画像にも影響を与えません。また、必要に応じて、サイズをtriple
に拡張することもできます。
ライブプレビューはこちら を確認してください。
または、以下をお読みください。
<img class="resize-double" src="https://placeimg.com/100/50/nature">
<img src="https://placeimg.com/200/100/nature">
// 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
を使用できます!
CSSを使用したい場合は、本当に良い方法があります。
img#image_id {
width: calc(2 * 320px);
height: auto; /* This can be omitted */
}
これは非常に便利で、1つの数値(つまり係数)を変更するだけで画像のスケールを変更できます。画像の高さの心配はありません。画像の高さをautoに設定しなくても、ブラウザによって自動的に設定されます(autoは幅と高さのデフォルト値であるため。 this および this )。また、幅を設定する代わりに高さを設定することもできます。
ある意味レスポンシブデザインに役立つと思いますが、本当にトリッキーだと思います!
注:親の幅または高さを設定した場合、フレックスボックスでは機能しません。この場合、幅と高さを明示的に設定する必要があります。そうしないと、別のトリックが発生します。フレックスボックスの動作はまったく異なります。
私の経験から、ウェブサイトで使用するために画像のサイズを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に関する楽しい記事
変換->スケールを利用できます
img#imagId {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
このようにjavascriptを使用して、画像サイズを2倍に変更できます。
<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>
さて、あなたはcssを使用して、ストレッチを避けることができます。
img{ width:640px; background-size: cover; height:auto;}
これにより、適切な高さで画像が均等に引き伸ばされます。高さを特定の数値に設定してみることもできます。
最も最適な方法は、最大の画像をサイトにロードし、ダウンスケール必要な場所に[〜#〜] css [を介してロードすることです。 〜#〜]。
1)アップスケーリングすると画像が歪むため、画像に最適な品質。
2)異なるサイズの画像をさらにロードする必要はありません
3)ダウンスケーリングは画像を損なうことはなく、[〜#〜] css [〜#〜]のほんの数行です
より大きな画像をロードしたくない場合、2番目に優れた最速の解決策はCSSを介して画像をアップスケールすることです。 Width属性は<img>
では機能しなくなりました