質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

390閲覧

CSSにて対象の画像の高さ幅を指定し、縦横比を固定、さらに中央下部を表示させる。そのサイズ感のまま、幅だけ画面いっぱいに広げたい

yuki-o0413

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

1クリップ

投稿2020/12/26 10:54

タイトル通りなのですが、一度指定したサイズで表示したい部分を指定しました。
そのサイズ感のまま幅のみ画面いっぱいにしたいのですが、うまくいきません。(以下のサイズ感のものを引き伸ばしたいと思っています)

CSS

1img { 2 height: 800px !important; 3 width: 1000px !important; 4 /* 縦横比を固定 */ 5 object-fit: cover; 6 /* 中央下を表示 */ 7 object-position: 50% 100% 8}

widthを100%にしてしまうと、サイズ感が大きくなり、欲しい画像のメインのサイズが大きくなり過ぎてしまいます。
元の画像のサイズを変えずに欲しい部分を好みの部分・サイズで引き伸ばす方法を調査したのですが、
実現できず。。。

何かヒントいただけるとありがたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fumu7

2020/12/26 13:41

”サイズ感”の定義を教えてください。
yuki-o0413

2020/12/27 23:39

”height: 800px、width: 1000pxで一旦縦横比を固定し下部中央が表示された状態で見える状態” を指していました。 その見える状態のものを幅だけ引き伸ばしたいと思っていたのですが、できないかもですね・・・
fumu7

2020/12/28 01:59

引き伸ばしたいもの(見えている部分のみ)は画像の一部なので、それを画像ファイルにして(元の画像から切り出して、画像ファイルとして保存しておいて)、それを希望する幅で表示するしかないでしょうね。
yuki-o0413

2020/12/30 01:10

はい、そうすることにします。 アドバイスいただきありがとうございました^^
guest

回答1

0

自己解決

引き伸ばしたいもの(見えている部分のみ)は画像の一部なので、それを画像ファイルにして(元の画像から切り出して、画像ファイルとして保存しておいて)、それを希望する幅で表示

で対処させていただきました。アドバイスいただきありがとうございました。

投稿2020/12/30 01:12

yuki-o0413

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問