ブラウザのサイズを変更すると画像がリフローしない

ブラウザのサイズを変更すると、コード内の3つの画像がそのまま残ります。代わりに移動して積み重ねてほしい。私は把握するのに苦労しています、そして、どんな助けも大いに評価されるでしょう。ブラウザのサイズを変更すると画像がリフローしない

これは（私は初心者です）私のコードです：

<!DOCTYPE html> 
<title>Bad Doc</title> 
<html> 
<head> 

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

<style> 
@media only screen and (max-width: 320px) { 
    body { 
     background-color: lightblue; 
    } 
} 

.body { 
    margin: 0; 
    padding: 0; 
} 

a.item:hover { 
    background-color: gray; 
} 

a:link { 
    text-decoration: none; 
} 

p { 
    font-family: "Garamond", Times, serif; 
} 

.wrapper { 
    border: 1px solid blue; 
    padding: 1px; 


} 
.thing1 { 
    border: 1px solid blue; 
    float: left; 

} 

.content { 
    border: 1px solid blue; 
    overflow: auto; 

    } 

h1 { 
    font-size: 72px; 
    text-align: center; 
    margin: 0 0 20px 0; 
    font-family: "Garamond", Times, serif; 
} 

ul { 
    margin-right: 10px; 
    padding: 0 20px 0 20px; 
} 

li { 
    list-style-type:none; 
    font-family: "Garamond", Times, serif; 
    font-size: 14px; 
} 

.photos { 
    display: inline; 
} 

img { 
    max-width: 30%; 
    height: auto; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 

} 

img:hover { 
    opacity: 1.0; 
    filter: alpha(opacity=100); 
} 

#footer p { 
    text-align: center; 
    font-size: 14px; 
} 

</style> 
</head> 

<body> 

<div class="wrapper"> 
    <h1>gage</h1> 


<div class="thing1"> 
    <UL> 
     <li><a class="item" href=" ">about</a></li> 
     <li><a class="item" href=" ">contact</a></li> 
    </ul> 
</div> 


<div class="content"> 
    <div class="photos"> 
     <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a> 
     <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a> 
     <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a> 
    </div> 

</div> 

<div id="footer"> 
    <P>More stuff</p> 
</div> 

</div> 




</body> 
</html>

出典

2016-04-12 Chris

あなたの問題を説明するのに役立つ画像は、私たちが本当に役立つでしょう。 –

あなたは30％にmax-widthセットを持って、小さな画面上で100％にこれを変更するには、メディアクエリを使用しています。

出典

2016-04-12 20:01:14 Stuart

私は本当に理解していません。私は以下を追加しましたが、私は非常によくメディアクエリを理解していないことをクリアしています... img { 最大幅：100％; } – Chris

メディアクエリに 'img'タグを追加し、' max-width'を100％に設定してください。メディアクエリをCSSファイルの最後に移動します。それ以外の場合は、メディアクエリ内のスタイルを上書きします。 – Stuart

これは完璧です。とても感謝しています。そして、私はメディアクエリーを底に動かすことについてもう少し感謝しています。物事がどのように上書きされるのか分からなかった。本当にありがとう。 – Chris

ブラウザのサイズを変更すると画像がリフローしない

答えて

関連する問題