人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryを使用して、ある画面を開いた時に、画面内のあるclassの画像を縦横80%縮小して表示したいです。
参考になるソースやサイトを教えてください。

(jQueryが希望ですが、他のライブラリでも構いません)


●質問者: nemutaiyo
●カテゴリ:コンピュータ インターネット
✍キーワード:Class jQuery サイト ソース ライブラリ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Km1967
●35ポイント

http://semooh.jp/jquery/api/css/css/name%2C+value/

$(function() {
 $('#クラス名').css('width', '80%')
 .css('height', '80%');
});
◎質問者からの返答

ありがとうございます!早速試してみます!


2 ● Cherenkov
●35ポイント

縮小表示するだけならjQueryを使う必要はありません、cssだけで出来ます。


「%」の指定は、親ボックスの幅に対する割合となります。

スタイルシート[CSS]/プロパティ一覧/width プロパティ - TAG index Webサイト

とあるので親の幅を指定することが必要です。


サンプル。

http://jsfiddle.net/TCfeE/


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
 $("#logo2").css({
 "width":"80%",
 "height": "80%"
 });

 $("#logo3").click(function(){
 $(this).toggleClass("google80");
 });

});
</script>
<style>

.content {
 width: 300px;
 border: 1px solid black;
}

#logo1 {
 width: 80%;
 height: 80%;
}

.google80 {
 width: 80%;
 height: 80%;
}

</style>

</head>
<body>
<div class="content">
 <p>imgサイズ指定なし。親のサイズだけ決まっている状態</p>
 <img id="logo0" src="http://www.google.co.jp/intl/ja_jp/images/logo.gif">
</div>
<div class="content">
 <p>cssで縮小</p>
 <img id="logo1" src="http://www.google.co.jp/intl/ja_jp/images/logo.gif">
</div>
<div class="content">
 <p>jQueryを使ってstyleを追加</p>
 <img id="logo2" src="http://www.google.co.jp/intl/ja_jp/images/logo.gif">
</div>
<div class="content">
 <p>クリックするとjQueryを使ってclassを切り替える</p>
 <img id="logo3" src="http://www.google.co.jp/intl/ja_jp/images/logo.gif">
</div>
</body>
</html>
◎質問者からの返答

ありがとうございます。

IMGのパーセントで縦横比を固定できると思っていましたが、なぜかできません。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ