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

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

概要
画像高さをブラウザ内横幅に合わせて制御。
実装例はトップページの大きな画像です。
使用方法
画像高さで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);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page