回答編集履歴
2
1回目の編集はマージンじゃなくheightをcalcでした。2回目削ります。
answer
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
+
追記 回答の上下を入れ替えました
|
|
2
|
+
|
|
3
|
+
おそらくdisplay:flex;してますよね？
|
|
4
|
+
portada-1に当てるheightを`height: calc(120px + 2vw);`とかにすれば、
|
|
5
|
+
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
|
|
6
|
+
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
|
|
7
|
+
※レスポンシブというかリキッドデザインのような気もしますが。
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
以下蛇足です。
|
|
1
11
|
お望みの方法と異なるかもしれませんが、
|
|
2
|
-
|
|
3
|
-
portada-1、2をflexで横並びにするのをやめて、
|
|
12
|
+
portada-1、2をflexで横並びにするのをやめて、
|
|
4
13
|
portada-1にfloat:left;を当てて、
|
|
5
14
|
portada-1の高さは画像の高さに指定して、
|
|
6
15
|
portada-1の上下の位置はmarginで調節して…
|
|
7
16
|
|
|
8
17
|
という感じの実装はいかがでしょうか？
|
|
9
|
-
|
|
10
|
-
以下蛇足です。
|
|
11
|
-
|
|
18
|
+
※注意点はテキストが回り込んでしまうことです。
|
|
12
|
-
portada-1に当てるheightを`height: calc(120px + 2vw);`とかにすれば、
|
|
13
|
-
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
|
|
14
|
-
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
|
1
マージンについての補足
answer
CHANGED
|
@@ -5,4 +5,10 @@
|
|
|
5
5
|
portada-1の高さは画像の高さに指定して、
|
|
6
6
|
portada-1の上下の位置はmarginで調節して…
|
|
7
7
|
|
|
8
|
-
という感じの実装はいかがでしょうか？
|
|
8
|
+
という感じの実装はいかがでしょうか？
|
|
9
|
+
|
|
10
|
+
以下蛇足です。
|
|
11
|
+
どうしてもdisplay:flex;のままにするのであれば、
|
|
12
|
+
portada-1に当てるheightを`height: calc(120px + 2vw);`とかにすれば、
|
|
13
|
+
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
|
|
14
|
+
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
|