レスポンシブ対応について教えてほしいことがあります

画像を４つ風車みたいに真ん中が重なるものを作りたいのですが、ブラウザサイズが大きかったりするとずれてしまいます。
position以外のやり方でなにかいい方法はないでしょうか？

2016/10/23 03:01

回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、本文を削除するのはやめましょう。https://teratail.com/questions/history-questions/51829 ここから過去の投稿を確認できるので、それを使って記事を復元してください。

行動規範の内容に同意します

回答1件

ベストアンサー

タブレットで一列というのは考慮していませんがこちらでどうでしょうか。

https://jsfiddle.net/h9eodu7x/

html
1<ul class="boxes">
2  <li>
3    <div class="box box--1">
4      <img src="//placehold.it/800x450/ccc" alt="" />
5    </div>
6  </li>
7    <li>
8    <div class="box box--2">
9     <img src="//placehold.it/800x450/3cc" alt="" />
10      
11      <a href="#" class="button">ボタン</a>
12    </div>
13  </li>
14    <li>
15    <div class="box box--3">
16      <img src="//placehold.it/800x450/c3c" alt="" /> 
17      
18      <a href="#" class="button">
19      ボタン</a>
20    </div>
21  </li>
22    <li>
23    <div class="box box--4">
24      <img src="//placehold.it/800x450/cc3" alt="" />
25    </div>
26  </li>
27</ul>

css
1body {
2  margin: 0;
3  padding: 0;
4}
5
6.boxes {
7  list-style-type: none;
8  overflow: hidden; // clearfix
9}
10
11.boxes > li {
12  width: 50%;
13  float: left;
14}
15
16.box {
17  padding-top: 56.25%;
18  position: relative;
19}
20
21.box img {
22  width: 100%;
23  height: 100%;
24  position: absolute;
25  top: 0;
26  left: 0;
27}
28
29.box--1 {
30  transform: translate3d(0 ,20px, 0);
31}
32
33.box--2 {
34  transform: translate3d(-20px , 0, 0);
35}
36
37.box--3 {
38  transform: translate3d(20px , 0, 0);
39}
40
41.box--4 {
42  transform: translate3d(-40px, -20px, 0);
43}
44
45.button {
46  display: block;
47  line-height: 40px;
48  background: #fff;
49  border: 1px solid #000;
50  text-align: center;
51  position: absolute;
52  right: 50px;
53  bottom: 50px;
54  left: 50px;
55  margin: auto;
56}