画像を固定の幅からはみ出させず、かつ、その幅内で画像を拡大したい

前提・実現したいこと

ある幅内で画像の幅を収めつつ、その幅内で画像の拡大をしたいです。
その際、はみ出た分はカット（非表示）したいです。
言葉足らずで説明が至らない点もあるかと思いますので、詳しくは以下の記事をご覧いただければと思います。

どうぞご教授よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<div class="fv-wrapper">
2     <img src="img/the-honest-company-uM-WXMr0YXc-unsplash.png" alt="" class="fv-img">
3    </div>

該当のソースコード

SCSS
1 .fv-wrapper {
2
3
4   text-align: left;
5   z-index: 2;
6
7
8
9   .fv-img {
10    zoom: 1.2;
11    width: 600px;
12    height: 890px;
13    object-fit: cover;
14
15   }
16  }

試したこと

①tranceform:scalを設定する。参考記事
→この記事がやりたいことと見事マッチしていたので試してみたのですが、拡大はされるものの幅を超えて拡大されてしまいます。

②object-fitを設定する。
→幅内では収まるものの拡大具合が足りない。
やりたいこととしてはnoneが一番近いと思ったが、念のため全部やってみたところどれも拡大具合が理想とするものと違いました。拡大具合を微調整できるものが知りたいです。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

Lhankor_Mhy

2021/03/04 07:55

ご存知とは思いますが。 > この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。 https://developer.mozilla.org/ja/docs/Web/CSS/zoom

K_3578

2021/03/04 07:56

本質問の回答ではありませんが、幾つか過去質問を見た所知らなさそうなので指摘させていただきます。 URLなどは「リンクの挿入」を押すと出てくる [リンク内容](http://)　を使うと回答者の手間が減るので覚えて頂けると。

mitrasi

2021/03/04 07:59

>Lhankor_Mhy様やはり非推奨なのですね、あまり見かけないので薄々思っていましたが…情報ありがとうございます！ >K_3578様かしこまりました！情報ありがとうございます！

Lhankor_Mhy

2021/03/04 08:02

①でいいように思うのですが、どういう問題が起きていますか？

mitrasi

2021/03/04 08:12

①で試してみたところ、拡大はされますがその際幅が無視されてスケールサイズを大きくすればするほど画面幅に広がっていきます。設定する箇所を、記事では<img>を囲む外枠タグに設定するとあり、もちろんそれはやりましたし、逆に<img>タグにあえて設定してみるという逆のこともしましたがどちらも同じ結果でした。ちなみに検証ツールにはあがってきているので、効いていないわけではないと思います。

Lhankor_Mhy

2021/03/04 08:21

qiitaの記事中での動作が希望と異なる、という理解で合っていますか？（まだ、mitrasi さんが望んでいる結果を読み取れずにいます）

mitrasi

2021/03/04 08:30

いいえ、記事の通りにしたいのが理想ですが、記事の通りにいかないので困っているのです。やりたいことはまさにドンピシャで記事と全く同じことで、例えば300pxの正方形の幅内に画像を収めつつ、その幅からはみ出さずにその中で画像の拡大縮小を行いたいのです。私の説明ではややこしくなってしまうと思うので、「記事と全く同じことがしたいけどできなくて困っています」とご理解頂いて問題ありません。語彙力が乏しくて申し訳ありません????

Lhankor_Mhy

2021/03/04 08:42

qiitaの記事では、ラップしている要素があると思いますが、ここではそれがfv-wrapperだと考えていいのですか？

mitrasi

2021/03/04 08:47

はい、そのつもりです！

退会済みユーザー

2021/03/04 13:40

えっと、すみません。みなさま丁寧にやり取りされているのでどうしようか迷ったんですが、親要素のoverflow:hidden;とか、そもそも親要素の大きさを固定していないことが原因だと思われるのでその辺りをお試しいただきたく思いコードをのせてみました。

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

回答1件

ベストアンサー

回答しても良いですか？って聞くのも変なんですけど。

まず親要素からはみ出さないためには親要素の大きさを決めます。
決めた後にはみ出した部分を隠せと記述します。
※ご自身で必要なCSSは残して下記コードを追記してください。
※大きさは適当に500pxの正方形としました。お好みの大きさに変更してくださいね。

css
1.fv-wrapper {
2    width: 500px;
3    height: 500px;
4    overflow: hidden;
5}

画像にカーソルをのせると１秒かけて２倍に拡大します。
※拡大率や秒数はお好みで変えて下さいね。

CSS
1.fv-img:hover {
2        transform: scale(2);
3        transition: 1s;
4    }

以下蛇足です。
CSSの{}の位置がSCSSの記述法になっている気がします。
SCSSとして書かれていますか？

投稿2021/03/04 13:35

退会済みユーザー

総合スコア0

mitrasi

2021/03/04 20:56 編集

ご回答ありがとうございます！おっしゃる通り、親要素に幅を指定したらその幅は固定でその中で拡大縮小できました。その際、また新たに別の問題が発生してしまいましたが、「拡大縮小」は叶ったので一旦この質問は解決とさせていただきます。本当にありがとうございました！ちなみにscssのまま載せてしまいました。申し訳ありません。以後気を付けます????

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