teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

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

2020/11/13 16:26

投稿

donjirou
donjirou

スコア1

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