質問: HTMLとCSSについての質問です。 【表現したいこと】 1画像をウィンドウの横幅に合わせていっぱいに表示する。 2画像の高さと、画像の中心を変えずにウィンドウを縮めたり広げたりできるようにしたい。 (ウィンドウを縮めていくと、左右から同じように画像が見切れていく感じです。) 現在はimgタグを使用しています。 使用するタグにこだわりはありません。 ``` img { width: 100%; height: 600px; ``` とすると、高さ600pxのままで希望通りなんですが、横幅が100%のため画像が縮んでしまうような表示になってしまいます。 かといって横幅を1300pxなどと指定すれば、デバイスによってウィンドウ幅の違いに対応できませんし、画面幅を縮めた際には、ただ画像が見切れてしまうということになってしまいます。 「画像をウィンドウ幅に合わせる」ということと「左右均等に徐々に見切れる」ということの両立がどうしてもできません。 画像の左右が徐々に見切れていくという表現は、画面幅が最大値から768pxに縮むところまでを予定しており、それ以降はメディアクエリにて違うサイズの画像を表示したり、別途でwidthとheightを指定しようと考えております。 お手数をかけますが、どなたか答えていただける方がいらっしゃいましたら、 よろしくお願いいたします。
回答: これで。 【object-fit - CSS: カスケーディングスタイルシート | MDN】 【1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】 【【CSS】画像のトリミングができる「object-fit」|プラカンブログ | WEB制作会社プラスデザインカンパニー】