はじめに
Webサイトを作成しているとき、「様々な画像を載せたい!」ってなったとき、画像を整えて表示させる方法について記事を書きたいと思います。
ただ単純にWebサイトに画像を表示させたいなら以下のようにすればできると思います。
※画像はサンプルのものを使用しています
sample1.html
<img src=./img/2.jpg border='0'>
サイズの違う複数の画像を表示させるときの問題点
サイズの違う複数画像を並べて表示させると以下のようになり、見た目も思わしくないです。
sample2.html
<img src=./img/1.jpg border='0'><br>
<img src=./img/2.jpg border='0'><br>
<img src=./img/3.jpg border='0'><br>
サイズを同等にして表示させると...
同じサイズにするためにwidthとheight属性で調節しますが、無理やりサイズを変更したため、画像が潰れて表示されてしまいました。
sample3.html
<img src=./img/1.jpg width='640' height='360' border='0'><br>
<img src=./img/2.png width='640' height='360' border='0'><br>
<img src=./img/3.jpg width='640' height='360' border='0'><br>
画像調整プログラム
画像は縦と横の比になっていますので、縦の長さに合わせた横の長さにしないといけません。
なので、
height:width=360:X
で計算して画像のサイズを調整するプログラムを作成しました。
※ついでに画像かどうか判別するプログラムも作成しました。
img_tool.php
<?php
//画像が出力できるか判定 画像ない場合は「No Image」出力
function img_judge($img){
$extension_list = array(".jpg", ".jpeg", ".JPG", ".JPEG", ".jpe", ".jfif", ".pjpeg", ".pjp", ".png", ".gif");//画像拡張子
foreach ($extension_list as $extension){
//当確の拡張子があればそのままブラウザに出力
if (strpos($img, $extension) !== false){
return $img;
}
}
return 'img/noimage.png';
}
//画像のサイズを変更
function img_size($img){
//「No image」の場合
if($img == 'img/noimage.png'){
return "width='640' height='360'";
}
//画像のサイズ情報を取得
$image = getimagesize($img);
if($image){
//heightのサイズを360pxに固定し、それに合わせた比率のwidthのサイズを設定(height:width=360:X)
$width = floor(360 * $image[0] / $image[1]);
//widthのサイズが640pxを超えていたら640pxに固定
if($width > 640){
$width = 640;
}
}else{
return "width='640' height='360'";
}
return "width='".$width."' height='360'";
}
?>
画像調整プログラムを使って表示
heightの長さを固定にさせて画像を表示させますと、元の画像サイズに合わせてサイズが調節できています。
sample4.php
<?php
require_once "img_tool.php";
?>
<img src=<?php echo img_judge("./img/1.jpg"); ?><?php echo img_size("./img/1.jpg"); ?> border='0'><br>
<img src=<?php echo img_judge("./img/2.png"); ?><?php echo img_size("./img/2.png"); ?> border='0'><br>
<img src=<?php echo img_judge("./img/3.jpg"); ?><?php echo img_size("./img/3.jpg"); ?> border='0'><br>
余談
そこまで大したことないと思いますが、サイトの印象も大分変わるのではないかと思います。
また、widthの長さを固定にさせる場合もプログラムを書き換えて使って下さい。
GitHub:img-output