LoginSignup
3

More than 5 years have passed since last update.

複数のサイズの違う画像をWebサイトに表示させる

Last updated at Posted at 2018-11-20

はじめに

Webサイトを作成しているとき、「様々な画像を載せたい!」ってなったとき、画像を整えて表示させる方法について記事を書きたいと思います。
ただ単純にWebサイトに画像を表示させたいなら以下のようにすればできると思います。
※画像はサンプルのものを使用しています

sample1.html
<img src=./img/2.jpg border='0'>

image.png

サイズの違う複数の画像を表示させるときの問題点

サイズの違う複数画像を並べて表示させると以下のようになり、見た目も思わしくないです。

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>

image.png

サイズを同等にして表示させると...

同じサイズにするために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>

image.png

画像調整プログラム

画像は縦と横の比になっていますので、縦の長さに合わせた横の長さにしないといけません。
なので、

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>

image.png

余談

そこまで大したことないと思いますが、サイトの印象も大分変わるのではないかと思います。
また、widthの長さを固定にさせる場合もプログラムを書き換えて使って下さい。
GitHub:img-output

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3