フリッカー画像をレスポンシブ対応にするCSS

フリッカー画像をレスポンシブ対応にするCSSの書き方について。

サイトレイアウトがレスポンシブの場合、画像もレスポンシブ対応にする必要がある。当ブログでも横幅可変になっており、表示幅に合わせて画像を縮小している。ブラウザの横幅を縮めると画像も連動して縮小されるのが確認できる。

当ブログでは、フリッカーから横幅最大640ピクセル (これより小さい場合もある) でコードを取得している。

フリッカーから取得したコード

<a href="https://www.flickr.com/photos/jkun2011/19507862032/" title="IMG_20150708_134418 by Joji Hiraoka, on Flickr" target="_blank"><img src="https://farm1.staticflickr.com/523/19507862032_3d1a76beda_z.jpg" width="640" height="480" alt="IMG_20150708_134418"></a>

CSS

a[title*="Flickr"] img {
 border                : solid 1px #CCC;
 height                : auto;
 max-width             : 96%;
 max-width             : calc(100% - 12px);
 padding               : 5px;
}
a[title*="Flickr"] img:hover {
 background            : #f0e68c;
}

簡単な説明

  • 画像の最大幅の計算では、5pxのパディングと1pxのボーダーを加味 (計12px) している。
  • 画像幅は、Flickrコードで指定された数値となるが、ブラウザ幅に収まらない場合は、縮小されることになる。
  • 対象となるコードは、[ttitle]に[Flickr]と云う記述があるコードを対象にしている。

是非、お試しあれ。

※2016-1-15: 画像はすべてSAKURAサーバーへアップロードしなおした。

admin
カテゴリ:ブログサービス
2015/07/17 19:53 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ