下記のようにテストサイトを作ってみたのですが、<div class="im"><img ~></div>のimgにうまくclassがついてくれません。
ご教授の程宜しくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像をぴったり合わせるテスト</title>
<style type="text/css">
.im {
position: relative;
width: 250px;
height: 250px;
overflow:hidden;
}
.vertically_long{
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
width: 100%;
height: auto;
margin: auto;
}
.horizontally_long{
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
width: auto;
height: 100%;
margin: auto;
}
.square{
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
width: 100%;
height: auto;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
(function(){
var imgW = $(".im img").width();
var imgH = $(".im img").height();
if(imgW>imgH || imgW==imgH){
$(".im img").addClass("horizontally_long");
} else if(imgW<imgH){
$(".im img").addClass("vertically_long");
} else {
$(".im img").addClass("square");
}
});
</script>
</head>
<body>
<div class="im"><img src="images/image01.jpg" width="1920" height="1280" alt=""></div>
</body>
</html>
No.1ベストアンサー
- 回答日時:
見た感じクラスはつくと思いますが・・・
<script>
$(function(){
var imgW = $(".im img").width();
var imgH = $(".im img").height();
$(".im img")
.toggleClass("horizontally_long",imgW>imgH)
.toggleClass("vertically_long",imgW<imgH)
.toggleClass("square",(imgW==imgH));
});
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のフェードイン・フェード...
-
デフォルト非表示にしたい。【t...
-
IMGタグごとにCSSを設定する方法
-
bxsliderで最初に縦に複数表示...
-
画像マウスオーバーで、checkb...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
-
リンク色を動的に変更したい。i...
-
離れた場所にマウスオーバーで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
デフォルト非表示にしたい。【t...
-
スクリプト
-
jQueryで4枚の画像がフェードア...
-
交互に入れ替わる画像を複数配置
-
クリッカブルマップをロールオ...
-
bxsliderで最初に縦に複数表示...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
「画像クリックで音声再生」を ...
-
画像切り替え
-
ボタンを押すたびに交互に切り...
-
jQuery 親要素の大きさに合わせ...
-
画像のフェードインについて・...
-
ボタンを画像に変更したい
-
画像のフェードイン・フェード...
-
アップロードファイルの種類に...
-
クリックでクリッカブルマップ...
-
Jquery cheeckbox(複数)とsli...
-
画像の切り替えについて
おすすめ情報
