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

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

ただいまの
回答率

88.62%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,464

tunnel

score 26

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

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

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

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

#wrap {
  overflow: hidden;
  font-size: 14px;
}

a {
  color: #000;
}

a:hover {
  text-decoration: none;
}

nav a {
  color: #fff;
}

nav {
  position: fixed;
  display: flex;
  width: 100%;
  height: 68px;
  z-index: 2;
  background-color: #000;
  color: #fff;
  background: -moz-linear-gradient(top, #000, transparent);
  background: -webkit-linear-gradient(top, #000, transparent);
  background: linear-gradient(to bottom, #000, transparent);
}

h1 {
  margin: 0 0 0 20px;
  height: 68px;
  line-height: 68px;
  font-size: 30px;
  font-weight: 100;
}

h1 span:first-child {
  color: #0f5;
}

h1 span:nth-child(2) {
  color: #fff;
}

h1 span:last-child {
  color: #888;
}

nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
}

nav ul li {
  list-style: none;
  margin: 0 20px;
  line-height: 68px;
}

#top {
  width: 100vw;
  height: 100vh;
}

#slideshow {
  position: fixed;
  width: 100%;
  height:700px; 
  overflow: hidden;
}
#slideshow img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left:0;
  z-index: 1;
  opacity: 0.0;
}
#slideshow img.active {
  z-index: 3;
  opacity: 1.0;
}
#slideshow img.last-active {
  z-index: 2;
}

.rank {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 5%;
}

.rank p:first-child {
  border-bottom: dotted 1px #ccc;
}

#main {
  position: relative;
  background-color: #eee;
  z-index: 1;
}
...
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/11/05 20:56

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

    キャンセル

  • aKusano

    2018/11/06 00:56

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

    キャンセル

  • tunnel

    2018/11/06 14:21

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

    キャンセル

  • kei344

    2018/11/06 15:02

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプル</title>
  <style>
  body{
    margin:0;
  }
  #container{
    width:100%;
  }
  img{
    width:100%;
  }
  @media screen and (max-width: 480px) {
    #container{
      width:100vw;
      height:100vh;
    }
    img{
      height:100%;
      object-fit: cover;
    }
  }
</style>
</head>

<body>
  <div id="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/US_Capitol_east_side.JPG">
  </div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る