object-fitのnoneで切り抜く元画像の大きさを変えたい

object-fitのnoneを適用させた画像を、そのままvw,vhなどを使ってサイズを変更するにはどうすればいいんでしょうか。

追記

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <style>
6        .a {
7            width: 100px;
8            height: 100px;
9            object-fit: none;
10        }
11        .b {
12            width: 200px;
13            height: 200px;
14            object-fit: none;
15        }
16    </style>
17</head>
18<body>
19    <img src="something.png">
20    <img class="a" src="something.png">
21    <img class="b" src="something.png">
22</body>
23</html>
24

実行画面

真ん中の切り抜いたサイズのものを拡大したいのですが、
ただwidth,heightの値を変えるだけだと、右のように表示される場所が変わってしまいます。

cerfweb

2020/11/12 15:43

その画像の前後のhtml構造や関連するcssなどの情報があった方が回答を得やすいと思いますよ。

miyabi_pudding

2020/11/13 01:25

cerfwebさんのおっしゃる通りなので、ソースコードを提示してください。 ```html ここにソースコード ``` という形式です。

donjirou

2020/11/13 16:27

追記しました。遅くなって申し訳ありません。

行動規範の内容に同意します

回答1件

cssのtransformのscale関数を使えばサイズの操作は可能ですが、使用する値はpxやremなどの単位のない数値である必要があるため、画面サイズに応じた値にするにはcssだけでは無理そうです。しかし、Javascript (jQuery) で補えば可能です。

css
1/* 追加 */
2.a, .b {
3    transform-origin: left;
4}

jQuery
1$(function(){
2    resize($('.a'), 100, 100);
3    resize($('.b'), 200, 200);
4    
5    $(window).on('resize', function(){
6	    resize($('.a'), 100, 100);
7	    resize($('.b'), 200, 200);
8    });
9});
10
11function resize(target, w, h) {
12    // w, h はそれぞれ画像の幅と高さ
13    let x = $(window).width() / w,
14    	y = $(window).height() / h;
15   
16    target.css('transform', 'scale(' + x + ', ' + y + ')');
17}
18