回答編集履歴

1

追記

2018/03/16 16:24

投稿

kszk311
kszk311

スコア3404

test CHANGED
@@ -13,3 +13,109 @@
13
13
 
14
14
 
15
15
  画像が高さ600pxのときの幅に指定すれば直るかと。
16
+
17
+
18
+
19
+ 追記
20
+
21
+ ---
22
+
23
+ これでいけませんか?
24
+
25
+
26
+
27
+
28
+
29
+ ```html
30
+
31
+ <img src="http://placehold.jp/24/cccccc/ffffff/1280x600.png?text=スライド1">
32
+
33
+ <img src="http://placehold.jp/24/dfdfdf/ffffff/1280x600.png?text=スライド2">
34
+
35
+ <img src="http://placehold.jp/24/cccccc/ffffff/1280x600.png?text=スライド3">
36
+
37
+ <img src="http://placehold.jp/24/dfdfdf/ffffff/1280x600.png?text=スライド4">
38
+
39
+ <img src="http://placehold.jp/24/aaaaaa/ffffff/1280x600.png?text=スライド5">
40
+
41
+
42
+
43
+ ```
44
+
45
+
46
+
47
+ ```css
48
+
49
+ /*=== 画像の表示エリア ================================= */
50
+
51
+ .main_slide {
52
+
53
+ position : relative;
54
+
55
+ overflow : hidden;
56
+
57
+ background-color:blue;
58
+
59
+ padding-top:93px;
60
+
61
+ }
62
+
63
+
64
+
65
+ .slide {
66
+
67
+ height:46.8vw;
68
+
69
+ }
70
+
71
+
72
+
73
+ /*=== 画像の設定 ======================================= */
74
+
75
+
76
+
77
+ .slide img {
78
+
79
+ display: block;
80
+
81
+ position : absolute;
82
+
83
+ max-width: inherit;
84
+
85
+ width: 100%;
86
+
87
+ left:100%;
88
+
89
+ animation : slideAnime 15s ease infinite;
90
+
91
+ margin-left: 50%;
92
+
93
+ transform: translateX(-50%);
94
+
95
+ }
96
+
97
+
98
+
99
+ ```
100
+
101
+
102
+
103
+ 画像のパスは、自分のやりやすいように買えています。
104
+
105
+
106
+
107
+ CSSでは、幅に合わせて高さが可変するように、「.slide」に対して600px/1280pxを「vw」の単位で出しています。
108
+
109
+
110
+
111
+ また、下記の指定で、拡大されても横みっちりつく様にしています。
112
+
113
+ ```css
114
+
115
+ max-width: inherit;
116
+
117
+ width: 100%;
118
+
119
+
120
+
121
+ ```