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...
回答1件
あなたの回答
tips
プレビュー