1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

imgタグの画像がchromeでは正常に表示されるのに、safariだとなぜか縦に伸びて表示されてしまうのでその解決策を載せていきます。

問題

chromeでは問題なく画像が表示されているのに、safariではなぜか画像が縦に伸びてしまう(バイトで遭遇したのでサンプルコードだけ載せます)。

<div style="display: flex">
  <img src="XXXXXXX">
  <img src="XXXXXXX">
</div>

解決策

safariではdisplay:flex;配下の画像は縦に伸びてしまうみたいです。この場合imgタグをdivなど他のタグで囲ってあげると解消されます。

<div style="display: flex">
  <div><img src="XXXXXXX"></div>
  <div><img src="XXXXXXX"></div>
</div>

align-items: flex-start;を付与してあげるやり方もあるそうです。

<div style="display: flex,align-items: flex-start">
  <img src="XXXXXXX">
  <img src="XXXXXXX">
</div>

おわりに

safariだとchromeで見れてた画像がぼやけたり、ブラウザバックの挙動が少し違ったりするので少し大変ですね。

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?