ASP.NETのImageコントロールでsrcsetを利用する - ASP.NET
ASP.NETのImageコントロールでsrcsetを利用する手順について紹介します。
概要
こちらの記事では高解像度ディスプレイでimgタグを利用して画像を表示すると画像がぼやける現象とsrcsetを利用した対処方法を紹介しました。この記事ではASP.NETのImageコントロールを利用した場合でsrcsetを利用するコードを紹介します。
事前準備
画像を準備します。今回は下図の2つの画像を用意します。
sample-01.png
sample-hires-01.png
高解像度用の2倍の解像度の画像です。
プログラム例 : パスの指定にルート演算子"~"などのASP.NETの機能を利用しない場合
通常の絶対パス、相対パスで画像のURLを指定できる場合は、asp:Image タグ内に srcset 属性を記述することで srcsetを利用できます。
UI
下図のUIを作成します。WebフォームにImageコントロールを配置します。
Imageコントロールのタグ"asp:Image"タグ内に srcset 属性を追記しsrcsetの記述をします。srcset内の書式については
こちらの記事を参照してください。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SrcSetImage1.aspx.cs" Inherits="ImageDemo.SrcSetImage1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>高解像度ディスプレイの場合には解像度の高い画像が表示されます。</p>
<asp:Image ID="Image1" runat="server" ImageUrl="~/sample-01.png" srcset="/sample-01.png 1x, /sample-hires-01.png 2x"/>
</div>
</form>
</body>
</html>
表示結果
プロジェクトを実行します。下図の画面が表示されます。高解像度のディスプレイの場合は解像度の高い画像が表示されます。
フォントサイズが100%のディスプレイの場合
フォントサイズが200%のディスプレイの場合
プログラム例 : 画像パスの指定でASP.NETの機能を利用する場合
srcsetの画像パスで ルート演算子"~"などのASP.NETの機能を利用する場合は、srcsetをコードで生成する必要があります。
UI
下図のUIを作成します。aspxファイルではImageコントロールにはsrcsetを記述しません。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SrcSetImage2.aspx.cs" Inherits="ImageDemo.SrcSetImage2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>高解像度ディスプレイの場合には解像度の高い画像が表示されます。</p>
<asp:Image ID="Image1" runat="server" ImageUrl="~/sample-01.png" />
</div>
</form>
</body>
</html>
コード
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ImageDemo
{
public partial class SrcSetImage2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string ipath = VirtualPathUtility.ToAbsolute("~");
if (ipath == "/") ipath = "";
string value = string.Format("{0}/sample-01.png 1x, {0}/sample-hires-01.png 2x", ipath);
Image1.Attributes.Add("srcset", value);
}
}
}
解説
aspxファイルではImageコントロールにはsrcsetを記述せず、コードでsrcsetを設定します。
ASP.NETのパス指定のルート演算子"~"はVirtualPathUtility.ToAbsolute()メソッドを利用して、実際のパスに変更します。変更された実際のパスを利用してsrcsetの値を作成します。
string ipath = VirtualPathUtility.ToAbsolute("~");
if (ipath == "/") ipath = "";
string value = string.Format("{0}sample-01.png 1x, {0}sample-hires-01.png 2x", ipath);
srcset属性をImageコントロールに追加するコードは下記になります。コントロールのAttributesプロパティのAddメソッドを呼び出して属性を追加します。Addメソッドの第一引数に属性名を、第二引数に追加する属性の値を与えます。このコードでImage1にsrcset属性を追加します。
Image1.Attributes.Add("srcset", value);
実行結果
高解像度のディスプレイの場合は解像度の高い画像が表示されます。また、ルート演算子"~"も展開されたパスとなります。
フォントサイズが100%のディスプレイの場合
フォントサイズが200%のディスプレイの場合
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
