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

Question

nemutaiyo

121

120もっと見る

70pt

コンピュータインターネット

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

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

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

回答の条件

1人10回まで

登録：2010/03/16 01:36:19
終了：2010/03/23 01:40:03

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

rouge_2008 2010/03/16 06:45:19

回答したご本人から訂正があるかもしれないですが、気がついていない可能性もあるのでコメントします。

$('#クラス名')

上記の記述についてですが、「#」の場合はidになります。
クラス名にしたい場合は、「$('.クラス名')」としてください。
Cherenkov 2010/03/16 12:10:07

>IMGのパーセントで縦横比を固定できると思っていましたが、なぜかできません。
何がどう困っているのか詳しく。できれば動くソース付きで書いてもらえるとみなさん答えやすい化と思います。

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Km1967 · Answer 1 · 2010-03-16T01:58:47+09:00

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

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

Cherenkov · Answer 2 · 2010-03-16T08:11:03+09:00

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

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

回答（2件）

Km1967224352010/03/16 01:58:47

Cherenkov15044932010/03/16 08:11:03

コメント（2件)

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