teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問異なる画像サイズを同じサイズに統一してレスポンシブ表示するには

編集履歴

質問編集履歴

5

修正

2020/04/19 02:26

投稿

popepe
popepe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,8 @@
30
30
 
31
31
  </span>
32
32
 
33
+ <span class="image-wrap">
34
+
33
35
  <a href="">
34
36
 
35
37
  <img src="" width="1080" height="1920"></a>

4

修正

2020/04/19 02:26

投稿

popepe
popepe

スコア7

test CHANGED
@@ -1 +1 @@
1
- 異なる画像を同じサイズに統一してレスポンシブ表示するには
1
+ 異なる画像サイズを同じサイズに統一してレスポンシブ表示するには
test CHANGED
File without changes

3

修正

2020/04/19 01:56

投稿

popepe
popepe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  以下を指定するとブラウザ幅がMAXの時は理想通りになります。
6
6
 
7
- このままの形でレスポンシブ表示ができればベストなのですが…。
7
+
8
8
 
9
9
  max-width: 1280px;
10
10
 
@@ -13,6 +13,8 @@
13
13
  object-fit: cover;
14
14
 
15
15
 
16
+
17
+ このままの形でレスポンシブ表示ができればベストなのですが…。
16
18
 
17
19
 
18
20
 

2

修正

2020/04/19 01:56

投稿

popepe
popepe

スコア7

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- 以下を指定するとブラウザ幅がMAXの時は理想通りになりますが、やはりブラウザ幅が変わると上手く動作しません…。
5
+ 以下を指定するとブラウザ幅がMAXの時は理想通りになります。
6
+
7
+ このままの形でレスポンシブ表示ができればベストなのですが…。
6
8
 
7
9
  max-width: 1280px;
8
10
 
@@ -28,7 +30,7 @@
28
30
 
29
31
  <a href="">
30
32
 
31
- <img src="" width="1920" height="1080"></a>
33
+ <img src="" width="1080" height="1920"></a>
32
34
 
33
35
  </span>
34
36
 

1

修正

2020/04/19 01:55

投稿

popepe
popepe

スコア7

test CHANGED
@@ -1 +1 @@
1
- 異なる画像を同じサイズに統一してレスポンシブ表示する方法
1
+ 異なる画像を同じサイズに統一してレスポンシブ表示するには
test CHANGED
@@ -1,8 +1,4 @@
1
- 現在は元の画像のアスペクト比を保ったままレスポンシブ表示されるようになっていますが、
1
+ 現在は元の画像のアスペクト比を保ったままレスポンシブ表示されるようになっていますが、横長の画像(1920x1080px)と縦長の画像(1080x1920px)をどちらも同じサイズ(1280x720px)に統一してレスポンシブ表示にしたいです。
2
-
3
- 横長の画像(1920x1080px)と縦長の画像(1080x1920px)を
4
-
5
- どちらも同じサイズ(1280x720px)に統一してレスポンシブ表示にしたいです。
6
2
 
7
3
 
8
4