PH画像サイズの調整

Question

画像をバックスラッシュで囲んで希望のサイズに直しているのですがwidth=100%のような相対値を入れるとheight=150に設定しても数値がきかないのですがそいういうルールがあるのでしょうか。
それとも何かを見落としているのでしょうか。

"height="150" width="150"
の場合は正常に出力されます。

<?
echo "<img src=\"xxxx.php?id=".$row['id']." height=\"150\" width=\"100%\"\">";
?>

よろしくお願いします。

Answer 1

heightの前に半角スペースを入れればいいと思います

Comments

[退会済みユーザー]

コメントありがとうございます。半角スペース入れてみましたがダメでした。
width:100%→150に変更すると150×150の画像が出力されるので100%の表記に問題があるかと思われます。

100%にするとheightも合わせて拡大されるのでしょうか。

だとするとwith:100%でheight:150にする方法が知りたいです。

よろしくお願いします。

[AKST]

ちなみに出力された際のダブルクォーテーションの数もおかしいです
単純にコピペミスなのかもしれませんが、、、

どこかというとsrcの値が閉じていません

HTMLの仕様についても補足すると
widthを100%指定したとしても、heightの値が効かなくなることはありません。
効かないとするならばそれはタグの書き方が間違っているのだと思われます。

[退会済みユーザー]

コメントありがとうございます。

自分で見た限りsrcの""問題ないかと思っていました。（出力もできました）
<?
echo "<img src=\"xxxx.php?id=".$row['id']."height=\"150\" width=\"100%\"\">";
?>
のどの部分でしょうか。
よろしくお願いします。

[AKST]

今、あなたの貼り付けたコードを実行すると表示されるHTMLのソースは以下のようになります。

※$row['id']には何が入るのか分からないので仮に「test」を入れています。

```HTML
<img src="xxxx.php?id=testheight="150" width="100%"">
```

heightがsrcの値に繋がってしまっているのでこれではheightの値が有効になりません。
ダブルクォーテーションの位置もおかしいのがわかるかと思います。

[退会済みユーザー]

コメントありがとうございます。
半角スペース自体はすでに修正しております。
また<img src="xxxx.php?id=test" height="150" width="100%"">になるように""の位置を調整するとエラーになってしまいます。
（当方の実力不足かもしれません。。）
もし宜しければ""の位置がわかると助かります。
"<img src=\"05.php?id=".$row['id']."\" height=\"200\" width=\"100%\">"だと高さが効かず、"<img src=\"05.php?id=".$row['id']."" .height=\"200\" width=\"100%\"\">"だとsyntax errorになってしまいます。

それと当方の疑問の１つが仮に””の位置と半角スペースが問題の場合、widtht:150に設定しても効かないはずなのですが実際には効きます。

150x150の画像が出力されます。
それを横幅いっぱいの100%にすると高さが効かなくなります。

よろしくお願いします。

[AKST]

下記のエラーになってしまうパターンについては、"の数が一つ多いです。。

<img src="xxxx.php?id=test" height="150" width="100%"">

100%の後ろに"が二個入ってしまっています。
ここは一つにする必要があります。

[退会済みユーザー]

コメントありがとうございます。
最後のバックスラッシュ&ダブルの１つ抜いてみましたがやはりsyntax errorです。

"<img src=\"xxxxx.php?id=".$row['id']."" .height=\"200\" width=\"100%\">"

今度はunexpected '=', expecting ',' or ';' inになってしまいました。
これはtestの後のheightがエラーになっている状態になります。

phpのダブルクオーテーション含めここらへんの記号は非常に苦手です。
何か法則が書いてあるサイトなどあるのでしょうか。

よろしくお願いします。

[AKST]

"<img src=\"05.php?id=".$row['id']."" .height=\"200\" width=\"100%\"\">"

syntax errorについては正しくは下記のコードになります。

"<img src=\"05.php?id=".$row['id']." height=\"200\" width=\"100%\">"

HTMLソースの"とphpの"で混乱しているようなので、そういう時は、以下のようにシングルクォートと組み合わせるのも一つの方法です。

'<img src="05.php?id='.$row['id'].' height="200" width="100%">'

ダブルクォーテーションをエスケープしないで済みますし

[退会済みユーザー]

コメントありがとうございます。
繰り返しになってしまうのですが"<img src=\"05.php?id=".$row['id']." height=\"200\" width=\"100%\">"だと高さが効かなくなります。

'<img src="05.php?id='.$row['id'].' height="200" width="100%">'でも同様に高さが効かなくなります。

どうすればいいのでしょうか。
よろしくお願いします。

[AKST]

height="200"
を
height="200px"
にしても効きませんか？

[退会済みユーザー]

コメントありがとうございます。
やはり効かないです。

[AKST]

PHPでうまく出力出来ているのであれば、あとはHTMLの問題かと思います。
ChromeやSafariの開発者ツールなどで画像に適用されているスタイルの情報を確認してはいかがでしょうか？

[退会済みユーザー]

コメントありがとうございます。
一応
<? echo
"<img src=\"xxxx.php?id=".$row['id']." height=\"200\" width=\"100%\" style=\"width: 100%;height: 150px;\">" ?>

上記のコードで解決はしました。
ただまだ詳しい原因はわかっておりません。

昨日から丁寧に回答していただきありがとうございます。
また機会がありましたら是非よろしくお願いします。

Answer 2

表示するページにCSSがかかっていたりしませんか？width/height属性よりCSSが優先されるため、style属性を使ったほうが確実な気がします。

<img src="https://placehold.jp/24/cc9999/993333/350x350.png
" width="100%" height="150" style="width: 100%;height: 150px;">
```**動くサンプル：**[https://jsfiddle.net/23dsczc6/](https://jsfiddle.net/23dsczc6/)

Comments

[退会済みユーザー]

コメントありがとうございます。

<? echo
"<img src=\"xxxx.php?id=".$row['id']." height=\"200\" width=\"100%\" style=\"width: 100%;height: 150px;\">" ?>

上記のコードで200px x 100%出力できました！！

ありがとうございます！

style=が効いたという事は原因は他のcssの要素なのでしょうか。

[kei344]

> style=が効いたという事は原因は他のcssの要素なのでしょうか。
その可能性はあります。デベロッパーツールで確認してみてはいかがでしょう。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

[退会済みユーザー]

回答ありがとうございます。
また今回解決していただきありがとうございます。
http://www.buildinsider.net/web/chromedevtools/01
の方でも確認しています。

この度はありがとうございます。