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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

3852閲覧

画像をフルスクリーンで綺麗に表示したい。

tunnel

総合スコア30

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/11/05 11:47

編集2018/11/06 05:54

pc画面にフルスクリーンで表示した横長の画像が、スマホ画面のように縦長になったら画像の比率を保ちながら横が狭まるようにするにはどうしたらよいでしょうか。
例えば、歌舞伎の舞台を画面として、両サイドから幕を閉じていくと画面が横長から縦長に変わりますが、あのようにpc画面→スマホ画面にした時、画像の両サイドが削られて中央がピックアップされるような形に指定したいです。
↓コレが
https://gyazo.com/d73dc99f79ed52ddc9a307892eff3b4b
↓こうです(コレは参考サイトです)
https://gyazo.com/2339d7701f716f074b860c15c5f591ee
今作っているサイトはviewportを設定しているためか画面サイズを変えるとそれに伴い画像の大きさも変わってしまいます。

↓↓↓↓↓↓ #top > #slideshow のところです。 ↓↓↓↓↓↓↓↓

html

1<!doctype html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>nishikori</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 8 <link rel="stylesheet" href="main.css"> 9 </head> 10 <body> 11 <div id="wrap"> 12 <nav> 13 <h1><a href=""><span>KEI</span><span> NISHIKORI</span><span>.COM</span></a></h1> 14 <ul> 15 <li><a href="">ブログ</a></li> 16 <li><a href="">試合結果</a></li> 17 <li><a href="">公式アプリ</a></li> 18 </ul> 19 </nav> 20 <div id="top"> 21 <div id="slideshow"> 22 <img src="img/kei1.jpg" alt="kei1" class="active"> 23 <img src="img/kei2.jpg" alt="kei2"> 24 <img src="img/kei3.jpg" alt="kei3"> 25 <img src="img/kei4.jpg" alt="kei4"> 26 </div> 27 <div class="rank"> 28 <p>ATP RANKING<span style="font-size: 50px;font-weight: 900;color: #0f5"> 5</span></p> 29 <p>Kei NISHIKORI<span style="font-size: 12px">OFFICIAL WEBSITE</span></p> 30 </div> 31 </div> 32 <div id="main"> 33 <div class="news"> 34 <div class="h2"> 35 <h2>WHAT'S NEWS</h2> 36 </div> 37 <div class="newsBox row"> 38 <div class="newsBox-1 newsB col-xs-12 col-sm-6 col-md-4"> 39 <a href=""> 40 <div class="img"> 41 <img src="img/news.kei1.jpg"> 42 <h3>FROM KEI<br>2018.10.10</h3> 43 </div> 44 <div class="text"> 45 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 46 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 47 </div> 48 </a> 49 </div> 50 ...

css

1@charset "UTF-8"; 2 3html { 4 margin: 0; 5 padding: 0; 6} 7 8body { 9 margin: 0; 10 padding: 0; 11} 12 13#wrap { 14 overflow: hidden; 15 font-size: 14px; 16} 17 18a { 19 color: #000; 20} 21 22a:hover { 23 text-decoration: none; 24} 25 26nav a { 27 color: #fff; 28} 29 30nav { 31 position: fixed; 32 display: flex; 33 width: 100%; 34 height: 68px; 35 z-index: 2; 36 background-color: #000; 37 color: #fff; 38 background: -moz-linear-gradient(top, #000, transparent); 39 background: -webkit-linear-gradient(top, #000, transparent); 40 background: linear-gradient(to bottom, #000, transparent); 41} 42 43h1 { 44 margin: 0 0 0 20px; 45 height: 68px; 46 line-height: 68px; 47 font-size: 30px; 48 font-weight: 100; 49} 50 51h1 span:first-child { 52 color: #0f5; 53} 54 55h1 span:nth-child(2) { 56 color: #fff; 57} 58 59h1 span:last-child { 60 color: #888; 61} 62 63nav ul { 64 display: flex; 65 margin: 0; 66 padding: 0; 67 position: absolute; 68 right: 0; 69} 70 71nav ul li { 72 list-style: none; 73 margin: 0 20px; 74 line-height: 68px; 75} 76 77#top { 78 width: 100vw; 79 height: 100vh; 80} 81 82#slideshow { 83 position: fixed; 84 width: 100%; 85 height:700px; 86 overflow: hidden; 87} 88#slideshow img { 89 width: 100%; 90 height: auto; 91 position: absolute; 92 top: 0; 93 left:0; 94 z-index: 1; 95 opacity: 0.0; 96} 97#slideshow img.active { 98 z-index: 3; 99 opacity: 1.0; 100} 101#slideshow img.last-active { 102 z-index: 2; 103} 104 105.rank { 106 font-size: 20px; 107 font-weight: 900; 108 color: #fff; 109 position: absolute; 110 top: 50%; 111 left: 5%; 112} 113 114.rank p:first-child { 115 border-bottom: dotted 1px #ccc; 116} 117 118#main { 119 position: relative; 120 background-color: #eee; 121 z-index: 1; 122} 123...

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/11/05 11:56

ソースをご提示ください。
aKusano

2018/11/05 15:56

PC画面でその横長の画像をどう実装しているかによって対処が変わります。現状のソースと表示状態のキャプチャ、理想の表示状態のカンプ等、もう少し詳細な情報がないと誰もお答えできません。
tunnel

2018/11/06 05:21

わかりました。編集いたします。
kei344

2018/11/06 06:02

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。(画像として質問文に表示されますし)
guest

回答1

0

ベストアンサー

写真持ってないのでアレですが、画像部分だけ抜粋するとこんな感じだと思います。

object-fit: cover;がうまくfitさせてくれます。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>サンプル</title> 7 <style> 8 body{ 9 margin:0; 10 } 11 #container{ 12 width:100%; 13 } 14 img{ 15 width:100%; 16 } 17 @media screen and (max-width: 480px) { 18 #container{ 19 width:100vw; 20 height:100vh; 21 } 22 img{ 23 height:100%; 24 object-fit: cover; 25 } 26 } 27</style> 28</head> 29 30<body> 31 <div id="container"> 32 <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/US_Capitol_east_side.JPG"> 33 </div> 34</body> 35</html>

投稿2018/11/06 06:40

編集2018/11/06 07:10
colling

総合スコア798

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問