border上に被せてる画像を画面縮小時、同じ比率（位置）で配置させたい

環境：Mac Chrome　Atomエディタ

↑見た目はこのようにAppleマークをborder上に配置し、
且つレスポンシブの際も、同じ位置（border-topのセンターあたり）に配置させたいのですが、
widthを467pxなどのように小さくすると、

↑このようにズレる事がわかります。

ブレイクポイントは、991px、767pxに設定。

Appleマークを常に最初の画像のように、配置させるにはどのようなcssにしたら良いのでしょうか？

ブレイクポイントを複数設けたとしても同じ事になると思うのですが、
恐らくそもそもposition指定が間違っているのか、
%だからなのかわかりません。

以上、よろしくお願いします。

現状試したこと（コードにもあります）

・positionを%で配置

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>テスト用</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
9    <link rel="stylesheet" href="css/test.css">
10  </head>
11  <body>
12  <div class="width767">
13    今のwidth:<span>767px以下</span>
14  </div>
15  <!--=============テストスペース============================  -->
16<main>
17  <div class="box-wrap">
18    <div class="box">
19      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
20      <p>氏名</p>
21      <p>役職</p>
22      <p>テキストテキストテキストテキストテキストテキスト
23         テキストテキストテキストテキストテキストテキスト
24         テキストテキストテキストテキストテキストテキスト
25         テキストテキストテキストテキストテキストテキスト</p>
26    </div>
27    <div class="box box-mar-left">
28      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
29      <p>氏名</p>
30      <p>役職</p>
31      <p>テキストテキストテキストテキストテキストテキスト
32         テキストテキストテキストテキストテキストテキスト
33         テキストテキストテキストテキストテキストテキスト
34         テキストテキストテキストテキストテキストテキスト</p>
35    </div>
36  </div>
37  <div class="box-wrap">
38    <div class="box">
39      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
40      <p>氏名</p>
41      <p>役職</p>
42      <p>テキストテキストテキストテキストテキストテキスト
43         テキストテキストテキストテキストテキストテキスト
44         テキストテキストテキストテキストテキストテキスト
45         テキストテキストテキストテキストテキストテキスト</p>
46    </div>
47    <div class="box box-mar-left">
48      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
49      <p>氏名</p>
50      <p>役職</p>
51      <p>テキストテキストテキストテキストテキストテキスト
52         テキストテキストテキストテキストテキストテキスト
53         テキストテキストテキストテキストテキストテキスト
54         テキストテキストテキストテキストテキストテキスト</p>
55    </div>
56  </div>
57</main>
58
59<!--=====テスト=======================  -->
60      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
61      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
62      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
63  </body>
64</html>
65

CSS
1body{
2  margin: 0;
3}
4.width767{
5  display: none;
6  font-size: 30px;
7  font-weight: bold;
8  letter-spacing: 2px;
9  text-align: center;
10}
11.width767 span{
12    color: red;
13}
14/*=======テストスペース=================  */
15main{
16  width: 100%;
17}
18.box-wrap{
19  display: flex;
20  justify-content: center;
21  text-align: center;
22}
23.box{
24  width: 380px;
25  border: 3px solid blue;
26  padding: 40px 35px;
27  position: relative;
28  margin-top: 200px;
29}
30.box-mar-left{
31  margin-left: 40px;
32}
33.box img{
34  width: 180px;
35  height: 180px;
36}
37.box p:nth-of-type(3){
38  text-align: justify;
39  letter-spacing: 2px;
40}
41.box img{
42  position: absolute;
43  top: -44%;
44  left: 90px;
45}
46
47/*===最大991pxまで======-  */
48@media (max-width:991px) {
49  .box-wrap{
50    display: flex;
51    justify-content: center;
52    flex-direction: column;
53    align-items: center;
54  }
55  .box{
56    width: 80%;
57    padding: 45px 35px 30px;
58  }
59  .box-mar-left{
60    margin-left: 0;
61  }
62  .box img{
63    position: absolute;
64    top: -55%;
65    left: 37%;
66  }
67}
68/*==最大767pxまで====-  */
69@media (max-width:767px) {
70  .width767{
71    display: block;
72  }
73  .box{
74    width: 95%;
75    padding: 35px 10px 15px;
76    margin-top: 150px;
77  }
78  .box img{
79    width: 120px;
80    height: 120px;
81    top: -43%;
82    left: 41%;
83  }
84}
85

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

回答2件

ベストアンサー

ブレイクポイントごとに指定しなくても、一括で実装できます。

各ブレイクポイントで指定している、【top:とleft:をすべて削除】し、以下のコードではいかがでしょか？

CSS
1.box img{
2  position: absolute;
3  bottom: 100%; //top→bottom&数値変更
4  left: 50%; //数値変更
5  transform: translate(-50%, 20%); //追加コード
6}

全体コードが以下です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>テスト用</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
9    <link rel="stylesheet" href="css/test.css">
10  </head>
11  <body>
12  <div class="width767">
13    今のwidth:<span>767px以下</span>
14  </div>
15  <!--=============テストスペース============================  -->
16<main>
17  <div class="box-wrap">
18    <div class="box">
19      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
20      <p>氏名</p>
21      <p>役職</p>
22      <p>テキストテキストテキストテキストテキストテキスト
23         テキストテキストテキストテキストテキストテキスト
24         テキストテキストテキストテキストテキストテキスト
25         テキストテキストテキストテキストテキストテキスト</p>
26    </div>
27    <div class="box box-mar-left">
28      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
29      <p>氏名</p>
30      <p>役職</p>
31      <p>テキストテキストテキストテキストテキストテキスト
32         テキストテキストテキストテキストテキストテキスト
33         テキストテキストテキストテキストテキストテキスト
34         テキストテキストテキストテキストテキストテキスト</p>
35    </div>
36  </div>
37  <div class="box-wrap">
38    <div class="box">
39      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
40      <p>氏名</p>
41      <p>役職</p>
42      <p>テキストテキストテキストテキストテキストテキスト
43         テキストテキストテキストテキストテキストテキスト
44         テキストテキストテキストテキストテキストテキスト
45         テキストテキストテキストテキストテキストテキスト</p>
46    </div>
47    <div class="box box-mar-left">
48      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg">
49      <p>氏名</p>
50      <p>役職</p>
51      <p>テキストテキストテキストテキストテキストテキスト
52         テキストテキストテキストテキストテキストテキスト
53         テキストテキストテキストテキストテキストテキスト
54         テキストテキストテキストテキストテキストテキスト</p>
55    </div>
56  </div>
57</main>
58
59<!--=====テスト=======================  -->
60      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
61      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
62      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
63  </body>
64</html>

CSS
1body{
2  margin: 0;
3}
4.width767{
5  display: none;
6  font-size: 30px;
7  font-weight: bold;
8  letter-spacing: 2px;
9  text-align: center;
10}
11.width767 span{
12    color: red;
13}
14/*=======テストスペース=================  */
15main{
16  width: 100%;
17}
18.box-wrap{
19  display: flex;
20  justify-content: center;
21  text-align: center;
22}
23.box{
24  width: 380px;
25  border: 3px solid blue;
26  padding: 40px 35px;
27  position: relative;
28  margin-top: 200px;
29}
30.box-mar-left{
31  margin-left: 40px;
32}
33.box img{
34  width: 180px;
35  height: 180px;
36}
37.box p:nth-of-type(3){
38  text-align: justify;
39  letter-spacing: 2px;
40}
41.box img{
42  position: absolute;
43  bottom: 100%;
44  left: 50%;
45  transform: translate(-50%, 20%);
46}
47
48/*===最大991pxまで======-  */
49@media (max-width:991px) {
50  .box-wrap{
51    display: flex;
52    justify-content: center;
53    flex-direction: column;
54    align-items: center;
55  }
56  .box{
57    width: 80%;
58    padding: 45px 35px 30px;
59  }
60  .box-mar-left{
61    margin-left: 0;
62  }
63
64}
65/*==最大767pxまで====-  */
66@media (max-width:767px) {
67  .width767{
68    display: block;
69  }
70  .box{
71    width: 95%;
72    padding: 35px 10px 15px;
73    margin-top: 150px;
74  }
75  .box img{
76    width: 120px;
77    height: 120px;
78  }
79}

一括で指定したほうが、後々の修正で手間がかからずとても便利です。
codepenで実装確認済みです。
https://codepen.io/otamu/pen/OGzKqm

投稿2019/04/17 06:24

編集2019/04/17 06:36

otamunote

総合スコア281

退会済みユーザー

2019/04/17 07:12

ありがとうございます。まさにこれが理想で問題解決はできました。ですが、以下の「何故」の部分が知りたいのです。（今後に生かす為と知識を深める為）ポイントは　transform: translate(-50%, 20%)　ですよね。 ①何故、topではなくbottomなのか。確かにtop:100%にしたら真下に行ってしまいました。relativeを基準とし、「そのbottomから100%離れた所に配置」=「つまり上」という解釈でOKでしょうか？それならtop=0; で何故できないのか。 ②何故、transform: translate　を適用したのかと、なければならない理由。このプロパティ、ググったのですがイマイチ存在意義のようなものが理解できません...。そして何故、この　(-50%, 20%)　数値なのでしょうか。確かに1でも数字を変更するとその1分変わるのは確認できるのですが、これらの数値、プロパティの因果関係はよく理解できません。

otamunote

2019/04/17 08:46

問題なく実装できたようでよかったです。以下、ご質問の返答です。（長文ご了承ください…。） >①何故、topではなくbottomなのか。正直こちらは、技術者の好みや癖も入ると思います。もちろんtopでの指定でも問題ありません。その際は「top: 0; transform: translate(-50%, -80%);」と記載すればほぼ同じことが実装できます。今回は.boxにpadding指定があり、top: 0;にしても.boxとimgの上辺が重なりませんでした。 bottmで完全に押し出した方が、後のtransform指定が少ない値で済み、後々コードを見返したときに分かりやすいと思いました。 >②何故、transform: translateを適用したのかと、なければならない理由結論からお伝えすると、サイトのメンテナンス性を考えたときに効率がよいからです。例えば、サイト公開後に修正が発生したとします。異なる比率の画像差し替えや、画像の位置変更の場合、ブレイクポイントの指定だと全ての数値を再度細かく設定する必要があります。これに対し、transform: translateは数値を変更すれば、ブレイクポイント関係なく修正反映されます。サイトは制作して終わりでなく、公開後も修正しながら運用していくものです。今後のメンテナンス性を考慮すると、transform: translateは最小限の作業工数で対応ができます。 >何故、(-50%, 20%)なのか。以下、かなり言い方をくずしてお話ししますのでご了承ください。まず、translateは指定した要素を移動させるためのプロパティです。分かりやくすると、(左右の移動, 上下の移動)です。このプロパティの便利なところは、%指定にすると指定した要素の大きさを基準に移動してくれます。左右移動の場合、最初にleft: 50%;を指定しました。これは画像が真ん中にくるのではなく、画像の始まり(画像の左辺)が真ん中にきます。これに対し、transform: translateの左右の値を「-50%」にすることで、180px画像の50%(画像横幅の半分)だけ戻してね、という命令をさせるのです。上記を%指定にしているので、ブレイクポイントで画像サイズが小さくなっても、必ず真ん中にきてくれます。上下移動も同じ原理です。コードは文章での説明になると、かなり難しくなります。頭で覚えるのと並行し、写経などで手を動かし体ごと覚えていった方が馴染みやすいと思います。

退会済みユーザー

2019/04/17 09:34

なるほどですね。わかりやすい回答ありがとうございます！

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

calc() を使うといいです。

CSS
1/*left: 41%;*/
2left: calc(50% - 60px);

https://developer.mozilla.org/ja/docs/Web/CSS/calc

投稿2019/04/17 06:08

x_x

総合スコア13749

退会済みユーザー

2019/04/17 07:25 編集

それだと、widthを467px　にすると、結局上にもズレており、意味がありませんでした。上の写真のようにはなりません。

x_x

2019/04/17 07:29

むろん、top もcalc()で記述するのではないですか？

退会済みユーザー

2019/04/17 07:49

そういう事ですね。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

border上に被せてる画像を画面縮小時、同じ比率（位置）で配置させたい

現状試したこと（コードにもあります）

関連した質問