ワードプレスに画像を投稿した際に、横長の画像だとブログのレイアウトにぴったりとフィットするけど、縦長の画像だと大きすぎちゃうよな〜ってことがあります。
こんな感じで。
ということで画像を読み込んだときに横長の時はwidth100％、縦長の時はwidth幅を調整するコードを書きました。
画像が縦長の時はwidth幅を調整する方法
以下のコードをJavascriptに追加してください。
// 投稿した画像が縦長か横長かを判定しクラスを与える
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i].src;
img.onload = function() {
if (this.width > this.height) {
this.className += " landscape";
} else {
this.className += " portrait";
}
}.bind(images[i]);
}
};CSSを追加。
/*縦長の時の幅*/
img.portrait {
width: 50%;
}
/*横長の時の幅*/
img.landscape {
width: 100%;
}
応援クリックよろしくお願いします！
