jQueryを使用して、ある画面を開いた時に、画面内のあるclassの画像を縦横80%縮小して表示したいです。

参考になるソースやサイトを教えてください。

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

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2010/03/16 01:36:19
  • 終了:2010/03/23 01:40:03

回答(2件)

id:Km1967 No.1

Km1967回答回数224ベストアンサー獲得回数352010/03/16 01:58:47

ポイント35pt

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

$(function() {
  $('#クラス名').css('width', '80%')
               .css('height', '80%');
});
id:nemutaiyo

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

2010/03/16 02:00:41
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932010/03/16 08:11:03

ポイント35pt

縮小表示するだけなら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>
id:nemutaiyo

ありがとうございます。

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

2010/03/16 12:02:03
  • id:rouge_2008
    回答したご本人から訂正があるかもしれないですが、気がついていない可能性もあるのでコメントします。

    $('#クラス名')

    上記の記述についてですが、「#」の場合はidになります。
    クラス名にしたい場合は、「$('.クラス名')」としてください。
  • id:Cherenkov
    >IMGのパーセントで縦横比を固定できると思っていましたが、なぜかできません。
    何がどう困っているのか詳しく。できれば動くソース付きで書いてもらえるとみなさん答えやすい化と思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません