サイズの決まってない画像を決まったサイズの表示領域に上下左右中央に表示する ｜ Tips Note by TAM
決まった寸法の領域に、縦横比もサイズもバラバラの画像を「うまいこと」表示しないといけないなんてことないでしょうか。 HTML + CSSで地味に苦労する上下左右中央とサイズの調整、未だに一発書きが出来ません。 flexboxなどの新しいプロパティが使えるようになりましたが、Internet Explorerのことを考えるとなかなか手放しでは使えないのが現状です。 縦横どちらも規定より小さい画像は上下左右中央に原寸表示 縦横比が表示領域と異なり、規定よりもサイズが大きい画像は長辺を縮めて最大幅に合わせて縮小し、上下もしくは左右の中央に表示 画像をトリミングも引き伸ばしもせずに、原寸もしくはそれ以下で全部表示するということですね。 この2つを実現し、なおかつ画像を背景画像ではなくimg要素として記述するコーディングをご紹介します。 今回はInternet Explorer 10にも対応していま
jQueryで要素を上下中央に配置する方法（IE8対応） | それからデザイン スタッフブログ
divの高さが決まっている時は、“margin-top”に高さの半分のネガティブマージンを指定すれば上下中央になります。（例：divの高さが100pxなら、“margin-top:-50px”） 高さが決まっていない時でも、下記のようにjQueryで要素の高さを取得して、cssにネガティブマージンを代入すれば上下中央にすることができます。 javascript $(function(){ var wH = $(window).innerHeight(); //ブラウザの高さを取得 var divH = $("div").innerHeight(); //divの高さを取得 $("body").css("height", wH + "px"); //bodyにブラウザの高さを代入 $("div").css("margin-top", "-" + divH / 2 + "px"); //div
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
