teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問imgを元データー縦横比のまま縮小して表示したい

編集履歴

質問編集履歴

1

SCSS -> CSSに変更

2017/07/14 03:03

投稿

innjera
innjera

スコア132

test CHANGED
File without changes
test CHANGED
@@ -52,70 +52,66 @@
52
52
 
53
53
  ```css
54
54
 
55
- ### SCSS利用です。
55
+ .card-block.lesson-img-list {
56
56
 
57
- .card-block.lesson-img-list{
58
-
59
- background-color: $red;
57
+ background-color: red;
60
58
 
61
59
  height: 7rem;
62
60
 
63
- .thumb {
61
+ }
64
62
 
65
- li {
63
+ .card-block.lesson-img-list .thumb li {
66
64
 
67
- margin: 0;
65
+ margin: 0;
68
66
 
69
- padding: 0;
67
+ padding: 0;
70
68
 
71
- list-style: none;
69
+ list-style: none;
72
70
 
73
- display: inline-block;
71
+ display: inline-block;
74
72
 
75
- width: 32%;
73
+ width: 32%;
76
74
 
77
- height: 7rem;
75
+ height: 7rem;
78
76
 
79
- overflow: hidden;
77
+ overflow: hidden;
80
78
 
81
- position: relative;
79
+ position: relative;
82
80
 
83
- cursor: pointer;
81
+ cursor: pointer;
84
-
85
- img {
86
-
87
- position: absolute;
88
-
89
- width: 100%;
90
-
91
- height: auto;
92
-
93
- top: 50%;
94
-
95
- left: 50%;
96
-
97
- -webkit-transform: translate(-50%, -50%);
98
-
99
- -ms-transform: translate(-50%, -50%);
100
-
101
- transform: translate(-50%, -50%);
102
-
103
- }
104
-
105
- &:hover img {
106
-
107
- opacity: 0.8;
108
-
109
- filter: alpha(opacity = 80);
110
-
111
- -ms-filter: "alpha(opacity=80)";
112
-
113
- }
114
-
115
- }
116
-
117
- }
118
82
 
119
83
  }
120
84
 
85
+ .card-block.lesson-img-list .thumb li img {
86
+
87
+ position: absolute;
88
+
89
+ width: 100%;
90
+
91
+ height: auto;
92
+
93
+ top: 50%;
94
+
95
+ left: 50%;
96
+
97
+ -webkit-transform: translate(-50%, -50%);
98
+
99
+ -ms-transform: translate(-50%, -50%);
100
+
101
+ transform: translate(-50%, -50%);
102
+
103
+ }
104
+
105
+ .card-block.lesson-img-list .thumb li:hover img {
106
+
107
+ opacity: 0.8;
108
+
109
+ filter: alpha(opacity=80);
110
+
111
+ -ms-filter: "alpha(opacity=80)";
112
+
113
+ }
114
+
115
+
116
+
121
117
  ```