サイドバーの最新記事設定ver,2(サイドバーより小さい画像の対処)

一昨日のブログ「とりあえず触れてみた」のソースの最初の画像データが、サイドバーより小さかったので、表示が「小さい幅を基準に大きい幅ははみ出して切り取る」の仕様を無視していたようなので(上下に黒のスペースが表示されていました)、かずや先生が更に修正CSSソースを考えてくれました。

「サイドバー画像の基本スタイル」コメントから下を、以下の物に上書きしてください。

/*サイドバー画像の基本スタイル*/

.htbl_new_entry_img {
position: relative;

top: 50%;

  • webkit-transform: translateY(-50%);
  • ms-transform: translateY(-50%);
  • o-transform: translateY(-50%);
  • moz-transform: translateY(-50%);

transform: translateY(-50%);

max-width: none !important;
width: 100% !important;
max-height: none !important;
height: 100% !important;
}


/*サイドバー画像が閾値以上に横長だった場合のスタイル*/

.htbl_new_entry.htbl_new_entry_img_max .htbl_new_entry_img {
margin-left: 50%;

  • webkit-transform: translate(-50%, -50%);
  • ms-transform: translate(-50%, -50%);
  • o-transform: translate(-50%, -50%);
  • moz-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: auto !important;
}


/*サイドバー画像が閾値以上に縦長だった場合のスタイル*/

.htbl_new_entry.htbl_new_entry_img_min .htbl_new_entry_img {
height: auto !important;
}

.htbl_new_entry_img {}内のみの修正ですからね。
かずや先生、ありがとう!

以下は、かずや先生からのコメント。

「max-width」と「max-height」の指定だと枠のサイズより小さいサイズの画像だと
画像が拡大されないんで余白が出ちゃってたみたい。

そんな仕様があったんですね・・・。

昨日に修正データが送られたんだけど、昨日の分のブログを書き終ってから・・・と思って後回しにしていたら、終わる気配が無くて今日修正しました(;´・ω・`)
「マナがアレンジした ウディタ講座ソースの説明」の方は、今日も頑張って追加更新していきます・・・orz

広告を非表示にする

※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana