jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

画像高さをブラウザ内横幅に合わせて制御

一覧へ戻る
注意
これらの記事は2016年当時の物で結構古いです。モダンブラウザでは不要な記述やJavaScriptでなくともCSSで実現できる機能もあります。 当時の記録として残してありますがあまり参考になるものではありません。
概要
画像高さをブラウザ内横幅に合わせて制御。
実装例はトップページの大きな画像です。
使用方法
画像高さでautoを使用できない箇所で使用したりします。
下のコード例は、画像オリジナルサイズが1160×500pxの場合です。 -10しているのはぬりたしです。
備考
現場合わせで作成するその場のコードです。 

//画像heightのCSS操作
(function(window,document){
	init();
	function init() {
		onResize();
		window.addEventListener('resize',function(){onResize();},false);
	}
	function onResize() {
		var h = parseInt(window.innerWidth * 500 / 1160 - 10);
		document.getElementById('slidewrapper01b').style.height = h + 'px';
	}
})(window,document);