回答編集履歴
2
typo修正
answer
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<style type="text/css">
|
|
11
11
|
img#StretchImg {
|
|
12
12
|
width:300px;
|
|
13
|
-
height:auto
|
|
13
|
+
height:auto;
|
|
14
14
|
}
|
|
15
15
|
</style>
|
|
16
16
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
@@ -19,10 +19,8 @@
|
|
|
19
19
|
$("#StretchImg").click(function() {
|
|
20
20
|
if($(this).css('width') == '300px') {
|
|
21
21
|
$(this).css("width", "100%");
|
|
22
|
-
$(this).css("height", "100%");
|
|
23
22
|
} else {
|
|
24
23
|
$(this).css("width", "300px");
|
|
25
|
-
$(this).css("height", "auto");
|
|
26
24
|
}
|
|
27
25
|
});
|
|
28
26
|
});
|
1
ソースコードに合わせて説明文を編集
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
1．拡大時に表示したいサイズの画像を<img src="bigimg.jpg" id="StretchImg">とかで表示する
|
|
2
|
-
2．その画像サイズをCSSで、最初は縮小表示させる```#StretchImg { width:
|
|
2
|
+
2．その画像サイズをCSSで、最初は縮小表示させる```#StretchImg { width: 300px; height:auto }```
|
|
3
3
|
3．onClickでその画像のCSSを変更し、100%表示させる```$("#StretchImg").click・・・```
|
|
4
4
|
既に100%表示されていた場合は縮小表示にする
|
|
5
5
|
とかでどうでしょう。
|