Q&A
CSSのそれぞれの指定ごとに、「;」をつければいいような気も…。あと、見た所Sassのようですが、いったん素のCSSで組まれてはどうでしょう？
レスポンシブの正方形を配置し、中央に画像が表示される画面を作りたい
現在、レスポンシブデザインのサイトを作成しております。
レスポンシブの正方形を配置して
中央に画像が表示される画面を作ろうとしております。
しかし、資料を基にHTMLを作成しても、希望の表示にならない状況です。
私の作成したコードに問題があればご指摘いただければと思います。
また、希望の画面を作る方法をご存知の方がいらっしゃれば
ご教授願えないでしょうか？
どうぞよろしくお願いいたします。
現在のコード
HTML
1<style> 2.squareBox{ 3 position: relative 4 &:before 5 display: block 6 content: '' 7 padding-top: 100% 8} 9 .content{ 10 position: absolute 11 top: 0 12 width: 100% 13 height: 100% 14 box-sizing: border-box 15 overflow: hidden 16} 17.thumb{ 18 width: 100% 19 height: auto 20} 21.centerTable{ 22 display: table 23 table-layout: fixed 24 text-align: center 25 width: 100% 26 height: 100% 27 > .tableCell 28 display: table-cell 29 vertical-align: middle 30} 31</style> 32<body> 33<div class="squareBox"> 34 <div class="content"> 35 <div class="centerTable"> 36 <div class="tableCell"> 37 <img class="thumb" src="Image.jpg"> 38 </div> 39 </div> 40 </div> 41 </div> 42</body> 43
コード上おかしいところは指摘できますが、希望の画面というのは、質問者さんしか知らないので、具体的に画像で例を示すなどしていただかないと、答えようがありません。
＞kszk311様 不十分な質問でお目汚しいたしました。以後、気を付けたいと思います。
回答1件
0
ベストアンサー
まず、画像は元から正方形なのでしょうか？一応、正方形ではないという前提で進めます。
また、
レスポンシブの正方形を配置し
という部分が具体的でないため、質問者様のやりたいことが憶測になってしまいますが、
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示したい
- ボックスは親要素の横幅の比率によって変わるため、
〜pxなどの絶対指定をせず〜%など相対で指定したい
上記を実現したい、という前提で進めます。見当違いの回答でしたらすみません。
※この方法はIE11およびEdgeには対応していません。対応方法は後述します。
※重要な点だけ下記に箇条書きにしています。
※わかりやすい様にマークアップを修正しています。
要点
1. .squareBox へ、親要素に対しての横幅の比率を指定します。
e.g.
親要素の 1/2 なら width: 50%;、 1/5 なら width: 20%;
※ 親要素ではなく画面全体に対しての比率にしたい場合は、 vw という相対単位の指定が可能です。
e.g.
画面全体の 1/2 なら width: 50vw;、 1/5 なら width: 20vw;
2. .squareBox に ::before 疑似要素を生成し、アスペクト比を考慮に入れた padding-top を指定します。
e.g.
正方形なら padding-top: 100%;、4:3の長方形なら padding-top: 75%;
3. 画像そのものの親要素（ .squareBox__item ）に対して絶対配置と上下左右引き伸ばしを指定します。
- position: absolute; z-index: 1;
- top: 0; left: 0; bottom: 0; right: 0;
4. 画像（ .squareBox__image ）に幅と高さを指定し、 object-fit: cover; にてトリミングします。
表記例：
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <style media="screen"> 9 .squareBox { 10 width: 50%; /* 1. */ 11 position: relative; 12 z-index: 0; 13 } 14 .squareBox:before { /* 2. */ 15 content: ''; 16 display: block; 17 padding-top: 100%; 18 } 19 .squareBox__item { 20 margin: 0; 21 padding: 0; 22 display: block; 23 position: absolute; /* 3. */ 24 top: 0; 25 left: 0; 26 bottom: 0; 27 right: 0; 28 z-index: 1; 29 } 30 .squareBox__image { 31 width: 100%; /* 4. */ 32 height: 100%; 33 object-fit: cover; 34 } 35 </style> 36</head> 37 38 39 40<body> 41 42 <div class="squareBox"> 43 <figure class="squareBox__item"> 44 <img src="https://source.unsplash.com/category/nature/800x400" class="squareBox__image"> 45 <!-- ^^^ 参考のため、横長の画像をランダムで入れています --> 46 </figure> 47 </div> 48 49<!-- スクリプト入れるなら・・・ --> 50</body> 51 52</html>
※もしIE11およびEdgeにも object-fit を対応したい場合
IE11およびEdgeへ object-fit プロパティを適用することはできません。
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」必要が出てきます。
この JS の処理を一から考えるのは大変ですが、ちょうど良いプラグインがあります。
今回、 object-fit-images というJSプラグインを使用して進めて参ります。
1. プラグインをダウンロード
object-fit-images のページにアクセスし、「Clone or download」ボタン -> 「Download ZIP」へ進み、 ZIP ファイルをダウンロードします。
2. プラグインを任意のディレクトリへ設置
上記でダウンロードした ZIP ファイルを展開すると、下記の位置にプラグインが入っています。
object-fit-images-master/
└─ dist/
└─ ofi.min.js
この ofi.min.js をご自身のプロジェクト内の任意の位置へ配置して下さい。
3. jQuery とプラグインを読み込み、関数を実行
jQueryとプラグインを読み込み、 objectFitImages() を実行させる記述をします。
※ </body> の直前に挿入します。（「スクリプト入れるなら・・・」のあたりですね。）
html
1<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 2<script src="{置いたディレクトリ}/ofi.min.js"></script> 3<script> 4objectFitImages(); 5</script>
4. IE・Edgeに対応させるプロパティをCSSへ追記
object-fit: cover; を指定しているセレクタへ、 font-family: 'object-fit: cover;' を指定します。
※本件であれば
css
1.squareBox__image { 2 width: 100%; 3 height: 100%; 4 object-fit: cover; 5 font-family: 'object-fit: cover;' 6}
のような形ですね。
補足
質問のコードが Sass 記法になっているのが気になりました。
Sass はコンパイラ言語なので、 <style> タグに書いてもスタイルはあたりません。
投稿2018/05/16 13:41
編集2018/05/17 03:06
総合スコア67
＞simesava様 丁寧な回答ありがとうございます。至らない質問でご迷惑おかけしました。
すみません、回答内の表記に誤りがあったため修正しております。①「4:3の長方形なら padding-top: 100%;」-> 「4:3の長方形なら padding-top: 75%;」、②「ライブラリ」 -> 「プラグイン」
あなたの回答
tips
プレビュー
