質問編集履歴

1

明確なhtmlのコードと実行画面を追加しました。

2020/11/13 16:26

投稿

donjirou
donjirou

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,69 @@
1
1
  object-fitのnoneを適用させた画像を、そのままvw,vhなどを使ってサイズを変更するにはどうすればいいんでしょうか。
2
2
 
3
3
  ![![イメージ説明](5c4c13cd1d3e6ed22fe9f2a9a2ee466d.jpeg)](b98ab26616f85839049391f5724c21f3.jpeg)
4
+
5
+
6
+
7
+ 追記
8
+
9
+ ```html
10
+
11
+ <!DOCTYPE HTML>
12
+
13
+ <html>
14
+
15
+ <head>
16
+
17
+ <meta charset="utf-8">
18
+
19
+ <style>
20
+
21
+ .a {
22
+
23
+ width: 100px;
24
+
25
+ height: 100px;
26
+
27
+ object-fit: none;
28
+
29
+ }
30
+
31
+ .b {
32
+
33
+ width: 200px;
34
+
35
+ height: 200px;
36
+
37
+ object-fit: none;
38
+
39
+ }
40
+
41
+ </style>
42
+
43
+ </head>
44
+
45
+ <body>
46
+
47
+ <img src="something.png">
48
+
49
+ <img class="a" src="something.png">
50
+
51
+ <img class="b" src="something.png">
52
+
53
+ </body>
54
+
55
+ </html>
56
+
57
+
58
+
59
+ ```
60
+
61
+ 実行画面
62
+
63
+ ![イメージ説明](85a6b03e4bff2e473cc1bd3e568affeb.jpeg)
64
+
65
+
66
+
67
+ 真ん中の切り抜いたサイズのものを拡大したいのですが、
68
+
69
+ ただwidth,heightの値を変えるだけだと、右のように表示される場所が変わってしまいます。