adiary開発日誌

検索条件

日付で絞り込み 2006年(2) 2010年(1) 2019年(1) 2022年(1)

全5件 (1/1ページ) 一覧表示に切り替え記事本文を表示

まだ重たいCMSをお使いですか？
毎秒1000リクエスト を捌く超高速CMS「adiary」

2022/09/30(金)[CSS] div で aspect-ratio を維持したまま object-fit 的なことがしたい

CSS

画像ファイルは、縦横比を維持して、枠の中で最大サイズに表示することが容易にできます。

<!DOCTYPE html>
<head><style>
body    { padding: 10px; }
#frame1, #frame2 { display: inline-block; border: red 2px solid; }
#frame1 { width: 220px; height: 100px; }
#frame2 { width: 120px; height: 100px; }
img {
	width:		100%;
	height:		100%;
	object-fit:	contain;
}
</style></head>
<body>
<div id="frame1">
	<img src="img320x180.png">
</div>
<div id="frame2">
	<img src="img320x180.png">
</div>
</body>
</html>

これを img タグ画像ではなく div で実現しようとしても、divに対しての「object-fit」指定が無意味のため、うまくいきません。

そこでちょっと工夫して実現してみました。

コメント（0件）

2019/07/05(金)JavaScriptから .png 画像を加工してCSSに適用する

プログラム::JavaScript

png画像をJavaScript上で加工して、CSSに適用する方法。

背景

adiaryでは、UIアイコン（このサイトだとページ送りやタグ一覧に出ている▼等）を色指定に基づいて動的にロードしています。

仕組みとしては、予め128種類の色の異なる画像アイコンを用意して、指定色にもっとも近い色をロードするという感じになっていますが、いくつか問題があります。

画像ファイルを増やすには限界があり近似色になってしまう。
1KBにも満たないような小さなファイルをわざわざ別ファイルとしてロードさせるのは嫌。*1

色が固定で良いなら、base64で埋め込むだけの話なのですが……。

.ui-icon {
	background-image:	url('data:image/png;base64,XXXX----XXX=');
}

adiaryはテーマの色をユーザーが自由に変更できるという素敵な機能が付いておりまして、そういうわけにも行きません……。

正攻法

コメント（0件）

2010/02/18(木)画像の縦横中央配置 / CSS / クロスブラウザ

プログラム::JavaScript

画像の縦横中央配置

HTMLのソース。余計な改行やスペースを入れないこと。

<div class="image"><span class="dummy"></span><img src="xxx.png" /></div>

CSS。

div.image {
	border:		1px solid #8ff;

	min-width:	320px;
	width:		320px;
	height:		240px;
	_width:		322px;
	_height:	242px;

	text-align:	center;
	display:	block;
}
div.image span.dummy {
	height:		240px;
	width:		0px;
	vertical-align:	middle;
	display:	inline-block;
}
div.image img {
	max-width:	320px;
	max-height:	240px;
	vertical-align:	middle;

	/* IE6 hack */
	_margin-top:	-1px;
	/* IE6 でアスペクト比保存縮小のためのhack */
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}
*:first-child+html div.image img { /* IE7 hack */
	margin-top:	-1px;
}

画像領域は320*240。
モダンブラウザは問題なく表示。
IE6は後方互換モード、IE7は標準準拠モード+ie8.js。
"margin-top: -1px;"してあげないと画像がなぜか下に1pxずれてしまう。

「span.dummy」を「display: inline-block」するのが縦方向センタリングのポイントです。

IE6で縦横比保存なmax-width, max-height

img {
	max-width:	320px;
	max-height:	240px;
	_width:		expression(this.height>240 && this.width*3<this.height*4 ? Math.floor(this.width*240/this.height) : (this.width > 320 ? 320: true ));
	_height:	expression(this.height>240 ? 240: true );
}

240と320を好みのサイズに変更してください。

コメント（0件）

2006/09/11(月)CSSXSSの問題

ネット

CSSXSSとは？

IEがCSSではない{を含む*1テキストをCSSと見なしてインポートしてしまい、あろうことかそのテキストがJavaScriptから操作可能なために発生するセキュリティーホールです。IE5、IE6などに存在します。

検証用コード。

<html><head>
<title>CSSXSS</title>
<style type="text/css">
@import url("./cssxss.txt");
</style>
</head><body>
<h1>CSSXSS</h1>
<textarea rows="20" cols="80" id="cssxss"></textarea>
<script type="text/javascript">
var text = document.getElementById( "cssxss" );
text.innerText = document.styleSheets(0).imports(0).cssText;
document.write("test")
</script>
</body></html>

この例では、cssxss.txt が「{」を含む場合、その中身を<textarea>に表示します。

悪意のあるサイトにアクセスした第３者に対し、既知のURL（例えばmixiなど）へユーザー自身にアクセスさせその結果をJavaScripを用いることで攻撃サイトに送信するなどという使い方をします。BASIC認証、Cookie認証その他あらゆる認証により守られたページも、ユーザー自身にアクセスさせることで突破できてしまうという驚異のセキュリティーホールです。