このような掲示板を使って発信していると、写真の画素数や縦横が変化しても一定の大きさで表示したいと思うことがあります。
縮小表示は、HTMLでできますが(ここの場合は縮小画像クリックで原寸画像表示も)、スマフォ画面やＰＣ画面に柔軟に対応となるとそれだけではできないので、CSSでレシポンシブルに対応することになります。この掲示板もそこまでは対応していたのですが、写真の縦横が変わっても同じ大きさにするという設定ができずに頭をひねっていました。横幅を設定すると、縦位置の写真は横位置の写真より大きく表示されるからです。それはＰＣの場合でもスマフォの場合でも同じです。掲示板じはPerlで動いているので画像の縦横を取得してそれに応じてHTMLを吐き出すようにプログラムすればできますが、もう少し簡単に、またperlを使わずにと頭を捻ったりググッたりしていました。
最近になってこんなサイトを見つけました。まさに願うものでした。すでに2014年の記事ですから気づくのが遅かっただけですが。
javascriptで画像縦横をチェックしcssを吐き出すみたいな感じのものです。
(1) HTMLヘッダの中にjavascriptを入れる
<script>
(function(){
function image_class(){
var img = new Image();
var images = document.querySelectorAll('img');
for(var i=0;i<images.length;i++){
img.src = images[i].src;
/*縦長画像にクラス名付*/
if(img.width < img.height){
images[i].className += ' vertically_long';
images[i].parentNode.className += ' vertically_long_outer';
/*横長画像にクラス名付*/
}else if(img.width > img.height){
images[i].className += ' horizontally_long';
images[i].parentNode.className += ' horizontally_long_outer';
/*正方形画像にクラス名付*/
}else{
images[i].className += ' square';
images[i].parentNode.className += ' square_outer';
}
}
}
if(window.addEventListener){
window.addEventListener('load', image_class, false);
}else if(window.attachEvent){
window.attachEvent('onload', image_class);
}
})();
</script>
(2) HTMLヘッダの中にcssを入れる
<style>/*横720pix以上のディスプレイの場合*/
@media screen and (min-width: 720px) {
/*縦長画像の横は最大480pixに*/
.vertically_long {
max-width: 480px;
height: auto;
}
/*横長画像の横は最大720pixに*/
.horizontally_long{
max-width: 720px;
height: auto;
}
}
/*横719pix以下のディスプレイの場合(スマホなど)*/
@media screen and (max-width: 719px) {
/*縦長画像の横は最大240pixに*/
.vertically_long {
max-width: 240px;
height: auto;
}
/*横長画像の横は最大360pixに*/
.horizontally_long{
max-width: 360px;
height: auto;
}
}
</style>
