質問編集履歴
3
画像の差し替え
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
/* 今回新たに追記した独自スタイル*/
|
|
29
29
|
.u-portfolio__image_original {
|
|
30
30
|
display: block;
|
|
31
|
-
width:
|
|
31
|
+
width: auto;
|
|
32
|
-
height:
|
|
32
|
+
height: 100%;
|
|
33
33
|
transition: all .2s ease;
|
|
34
34
|
object-fit: cover;
|
|
35
35
|
}
|
|
@@ -62,11 +62,11 @@
|
|
|
62
62
|
### 発生しているエラー
|
|
63
63
|
しかし、トリミングが行われずに実際は下記の画像のように空白ができてしまいます。(便宜上、親要素の領域を赤色四角の枠で表示しています)
|
|
64
64
|
|
|
65
|
-
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
|
|
68
68
|
|
|
69
|
-
そもそも`object-fit:cover;`で解決出来る問題ではないのか、またはbootstrapのstyle.cssに独自スタイルを加筆する運用方法が悪い
|
|
69
|
+
そもそも`object-fit:cover;`で解決出来る問題ではないのか、またはbootstrapのstyle.cssに独自スタイルを加筆する運用方法が悪いなど、自分なりに多角的に考えてみても分からず、今回質問をさせていただきました。
|
|
70
70
|
|
|
71
71
|
よろしくお願いします。
|
|
72
72
|
|
|
@@ -76,22 +76,36 @@
|
|
|
76
76
|
### 補足情報
|
|
77
77
|
・htmlでは、PythonのDjangoテンプレートを利用しています
|
|
78
78
|
・ブラウザの検証ツール当該箇所を確認してみたところ、下記の様に表示されました
|
|
79
|
-
|
|
80
80
|
|
|
81
81
|
```Styles
|
|
82
82
|
element.style {
|
|
83
83
|
}
|
|
84
|
+
.u-portfolio__zoom {
|
|
85
|
+
position: absolute;
|
|
86
|
+
top: 0;
|
|
87
|
+
bottom: 0;
|
|
88
|
+
left: 0;
|
|
89
|
+
right: 0;
|
|
90
|
+
text-indent: -10000px;
|
|
91
|
+
}
|
|
84
|
-
|
|
92
|
+
a {
|
|
85
|
-
|
|
93
|
+
color: #59287a;
|
|
94
|
+
}
|
|
95
|
+
a {
|
|
96
|
+
color: #59287a;
|
|
86
|
-
|
|
97
|
+
text-decoration: none;
|
|
98
|
+
background-color: transparent;
|
|
99
|
+
-webkit-text-decoration-skip: objects;
|
|
87
100
|
}
|
|
88
101
|
*, *::before, *::after {
|
|
89
102
|
box-sizing: border-box;
|
|
90
103
|
}
|
|
91
104
|
user agent stylesheet
|
|
92
|
-
i
|
|
105
|
+
a:-webkit-any-link {
|
|
93
|
-
o
|
|
106
|
+
color: -webkit-link;
|
|
94
|
-
o
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
text-decoration: underline;
|
|
95
109
|
}
|
|
96
110
|
body {
|
|
97
111
|
font-weight: 400;
|
|
@@ -166,3 +180,7 @@
|
|
|
166
180
|
background-color: #59287a;
|
|
167
181
|
}
|
|
168
182
|
```
|
|
183
|
+
|
|
184
|
+
・検証ツールのコンソール画面でcssファイルの読み込みエラーがないか確認してみたところ、エラーは検出されず独自classの読み込みには成功している様子でした。
|
|
185
|
+
・変更を行うたびにブラウザのキャッシュクリアを行なっています。
|
|
186
|
+
|
2
検証ツールの内容記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -74,4 +74,95 @@
|
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
### 補足情報
|
|
77
|
-
htmlでは、PythonのDjangoテンプレートを利用しています
|
|
77
|
+
・htmlでは、PythonのDjangoテンプレートを利用しています
|
|
78
|
+
・ブラウザの検証ツール当該箇所を確認してみたところ、下記の様に表示されました
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
```Styles
|
|
82
|
+
element.style {
|
|
83
|
+
}
|
|
84
|
+
img {
|
|
85
|
+
vertical-align: middle;
|
|
86
|
+
border-style: none;
|
|
87
|
+
}
|
|
88
|
+
*, *::before, *::after {
|
|
89
|
+
box-sizing: border-box;
|
|
90
|
+
}
|
|
91
|
+
user agent stylesheet
|
|
92
|
+
img {
|
|
93
|
+
overflow-clip-margin: content-box;
|
|
94
|
+
overflow: clip;
|
|
95
|
+
}
|
|
96
|
+
body {
|
|
97
|
+
font-weight: 400;
|
|
98
|
+
font-size: 1rem;
|
|
99
|
+
font-family: "Open Sans", sans-serif;
|
|
100
|
+
line-height: 1.6;
|
|
101
|
+
color: #1b1e24;
|
|
102
|
+
-webkit-font-smoothing: antialiased;
|
|
103
|
+
-moz-osx-font-smoothing: grayscale;
|
|
104
|
+
-moz-font-feature-settings: "liga", "kern";
|
|
105
|
+
text-rendering: optimizelegibility;
|
|
106
|
+
}
|
|
107
|
+
body {
|
|
108
|
+
margin: 0;
|
|
109
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
110
|
+
font-size: 1rem;
|
|
111
|
+
font-weight: 400;
|
|
112
|
+
line-height: 1.5;
|
|
113
|
+
color: #212529;
|
|
114
|
+
text-align: left;
|
|
115
|
+
background-color: #fff;
|
|
116
|
+
}
|
|
117
|
+
:root {
|
|
118
|
+
--blue: #007bff;
|
|
119
|
+
--indigo: #6610f2;
|
|
120
|
+
--purple: #6f42c1;
|
|
121
|
+
--pink: #e83e8c;
|
|
122
|
+
--red: #dc3545;
|
|
123
|
+
--orange: #fd7e14;
|
|
124
|
+
--yellow: #ffc107;
|
|
125
|
+
--green: #28a745;
|
|
126
|
+
--teal: #20c997;
|
|
127
|
+
--cyan: #17a2b8;
|
|
128
|
+
--white: #fff;
|
|
129
|
+
--gray: #6c757d;
|
|
130
|
+
--gray-dark: #343a40;
|
|
131
|
+
--primary: #59287a;
|
|
132
|
+
--secondary: #00c9a7;
|
|
133
|
+
--success: #0dd157;
|
|
134
|
+
--info: #2972fa;
|
|
135
|
+
--warning: #fab633;
|
|
136
|
+
--danger: #fb4143;
|
|
137
|
+
--light: #f6f9fc;
|
|
138
|
+
--dark: #1b1e24;
|
|
139
|
+
--breakpoint-xs: 0;
|
|
140
|
+
--breakpoint-sm: 576px;
|
|
141
|
+
--breakpoint-md: 768px;
|
|
142
|
+
--breakpoint-lg: 992px;
|
|
143
|
+
--breakpoint-xl: 1200px;
|
|
144
|
+
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
145
|
+
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
146
|
+
}
|
|
147
|
+
html {
|
|
148
|
+
font-size: 1rem;
|
|
149
|
+
}
|
|
150
|
+
html {
|
|
151
|
+
font-family: sans-serif;
|
|
152
|
+
line-height: 1.15;
|
|
153
|
+
-webkit-text-size-adjust: 100%;
|
|
154
|
+
-ms-text-size-adjust: 100%;
|
|
155
|
+
-ms-overflow-style: scrollbar;
|
|
156
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
157
|
+
}
|
|
158
|
+
*, *::before, *::after {
|
|
159
|
+
box-sizing: border-box;
|
|
160
|
+
}
|
|
161
|
+
*, *::before, *::after {
|
|
162
|
+
box-sizing: border-box;
|
|
163
|
+
}
|
|
164
|
+
::selection {
|
|
165
|
+
color: #fff;
|
|
166
|
+
background-color: #59287a;
|
|
167
|
+
}
|
|
168
|
+
```
|
1
問題点の追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -59,9 +59,16 @@
|
|
|
59
59
|
</div>
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
###
|
|
62
|
+
### 発生しているエラー
|
|
63
|
+
しかし、トリミングが行われずに実際は下記の画像のように空白ができてしまいます。(便宜上、親要素の領域を赤色四角の枠で表示しています)
|
|
64
|
+
|
|
63
65
|
|
|
66
|
+
|
|
67
|
+
当該箇所(htmlのimgタグのクラス)を別の名前に変更したところ、変更が反映されていた為、cssファイルの読み取りに関わる問題では無いと思います。
|
|
68
|
+
|
|
69
|
+
そもそも`object-fit:cover;`で解決出来る問題ではないのか、またはbootstrapのstyle.cssに独自スタイルを加筆する運用方法が悪いのか、はたまた`object-fit:cover;`が無効になっているかもしれないなど、自分なりに多角的に考えてみても分からず、今回質問をさせていただきました。
|
|
70
|
+
|
|
64
|
-
|
|
71
|
+
よろしくお願いします。
|
|
65
72
|
|
|
66
73
|
### 実現したい状態
|
|
67
74
|
|