【CSS】img画像の縦横比を保ったままボックス内に収める方法

2016年8月25日
CSS, Web制作

要件概要: ボックスのサイズは固定 横長の画像が来たらボックスの横幅に合わせる 縦長の画像が来たらボックスの縦幅に合わせる 画像サイズがボックスサイズより小さい場合はそのまま 縦横中央揃え 結論からいうと、「縦横中央揃え」以外の要件は下記のCSSで実現できます。 img { width:auto; height:auto; max-width:100%; max-height:100%; } ボックス内で画像を縦横に中央揃えさせたい場合も多いと思います。デモを用意しましたので、ご参考下さい。 See the Pen 4 way

`position : fixed`で全画面表示する時の悩み解消法

2016年1月30日
CSS, Web制作

一言まとめ ちょっとした工夫でposition : fixed;でも、以下のことが可能。 position : fixed;を設定した要素が、画面からはみ出てもスクロールできる 背景 (body) のスクロールを止める ちょっとしたモーダルウィンド(Modal Window)とか、別レイヤーで画面いっぱいに表示する場面って多々あると思います。 別レイヤーで、画面の縦横いっぱいに表示する時に使う手法は2つしかないです。 position : absolute; position : fixed; fixedのほうが多用されているように思いますが、表示するコンテンツのサイズが大きい時にabsoluteを使う人も多いでしょう。おなじみの「LightBox」でもabsolute使っていますよね? absoluteを使う利点はあまりないと思いますが、十中八九、