ブラウザを縮小させた時にレイアウトが崩れてしまいます。

Question

前提・実現したいこと

html css初心者です。
ブラウザを縮小させた時にレイアウトが崩れてしまいます。

発生している問題・エラーメッセージ

画像の上に画像を表示しているのですが、
ブラウザを縮小すると、画像の上に置いた画像が画面外に飛びでており画像が見えなくなります。

画像の上に置いた画像は .logoです

該当のソースコード

<div class="main">
	<img src="images/〇〇.jpg" class="ma_pic">
	<img src="images/■■.png" class="logo">
</div>

.ma_pic {
	position: relative;
	width: 100%;
}

.logo{
	position: relative;
	max-width: 100%;
	margin: 100px;
	top: -300px;}

Comments

[yoshinavi]

各画像の大きさと、どのようなレイアウトにしたいのかを詳細に提示してください。画像等で図示すると回答もつきやすくなるかと思います。

Answer 1

MDN - max-width

max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。

<div class="main">
    <img src="http://satyr.io/960x960" alt="">
    <img src="http://satyr.io/960x960" alt="">
</div>

img {
    max-width: 100%;
}