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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

リサイズ

コントロール、ウィンドウ、フォームやスクリーンのサイズ変更を指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

844閲覧

CSS スタイルシートでページのリサイズされた画像をウィンドウにフィットする方法

StreamsVector

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

リサイズ

コントロール、ウィンドウ、フォームやスクリーンのサイズ変更を指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/19 22:14

前提・実現したいこと

Chromeブラウザの拡張css(stylus)を使い、画像ページ一覧の大きさを一括変更したいです。
① 横の画像の比率を一括で105%にリサイズして表示したいです。
② さらに画像はウィンドウの縦にフィットするようにしたいです。

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

  • 画像のアス比を固定すると他の違う比率の形の画像も一括して同じになってしまう。

例:比率4:3の画像A と 比率3:5の画像B 
失敗なケース→ 一括でA、Bともに5:4
成功なケース→ Aの大きさ(縦100%横105%),Bの大きさ(縦100%横105%)
さらにウィンドウの縦の大きさに合わせる。

初心者なので詳しい方法がわからず困っております。
サンプルでcodepenに問題を載せておきました。それぞれ形の違う画像を一括で5%ずつ横に引き延ばすことはできますか?
どなたか優秀な方、ご回答よろしくお願いいたします。
#####ソースはcodepenのサイトにあります

該当のソースコード

- HTML <img src="https://i.imgur.com/38wwRpG.jpg"></img> <img src="https://i.imgur.com/3eKIG7k.jpg"></img> - CSS img { height: 100vh; }

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

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

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

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

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

guest

回答1

0

こういうことですか?

css

1img 2{ height: 100vh; 3 transform: scale(1.05, 1); 4}

投稿2020/05/20 03:39

Lhankor_Mhy

総合スコア36074

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問