Изображения не переполняются при изменении размера браузера

Три изображения в моем коде остаются на месте при изменении размера браузера. Я бы хотел, чтобы они двигались и складывались. Я изо всех сил пытаюсь понять, и любая помощь будет высоко оценена.Изображения не переполняются при изменении размера браузера

Это мой код (я новичок):

<!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

Некоторые изображения помогут вам объяснить вашу проблему, будет очень полезно для нас ответить. –

У вас есть max-width набор на 30%, использовать медиа-запрос, чтобы изменить это на 100% на небольших экранах.

источник

2016-04-12 20:01:14 Stuart

Я не совсем понимаю. Я добавил следующее, но я очищаю, не понимая медиа-запросы очень хорошо ... img { max-width: 100%; } – Chris

Добавьте строку в свой медиа-запрос для вашего тега 'img' и установите значение' max-width' равным 100%. Переместите медиа-запрос в нижнюю часть вашего CSS-файла, иначе ваши общие стили, объявленные после того, как будут переопределять те, что указаны в вашем запросе на медиа. – Stuart

Ах, это прекрасно. Благодарю. И я ценю дополнительный бит о перемещении медиа-запросов на дно. Я не понял, как все это изменится. Спасибо. – Chris

Изображения не переполняются при изменении размера браузера

ответ

Смежные вопросы