Чтение изображений в css

Question

У меня есть 4 изображения, выровненные бок о бок, с эффектом зависания с текстом. Это часть моего кода HTML

<nav id="border"> 
<ul class="photo"> 
<li class="li"> 
<a href="#"> 
<figure class="figure"> 
<img class="img" src="CSS/Imagens/pintura_auto2.jpg" alt="Image"> 
<figcaption class="figcaption"><p class="p">Ramo Automovel</p></figcaption> 
</figure> 
</a> 
</li> 

<li class="li"> 
<a href="#"> 
<figure class="figure"> 
<img class="img" src="CSS/Imagens/parede/parede32.jpg" alt="Image"> 
<figcaption class="figcaption"><p class="p">Construcao Civil</p> </figcaption> 
</figure> 
</a> 
</li> 
</ul> 
</nav> 

и это часть моего CSS:

#border{ 
position: absolute; top: 110%; left: 0%; 
width: 100%; 
max-height: 100%; 
min-width: 100%; 
height: 60%; 
border-top: 1px solid lightgrey; 
border-bottom: 1px solid lightgrey; 
background-color: #F2F2F2; 
} 

.photo { 
position: absolute; top: 50px; left: 0%; 
margin: auto; 
width: 100%; 
padding: 10px; 
text-align: center; 
} 

.photo .li { 
display: inline-block; 
width: 289px; 
} 

.photo .figure { 
height: 300px; 
width: 289px; 
overflow: hidden; 
position: relative; 
} 

.photo .img { 
display: block; 
width: auto; 
height: auto; 
-webkit-transition: all 300ms; 
-moz-transition: all 300ms; 
transition: all 300ms; 
max-width: 100%; 
} 

Изображения ширина и высота 300px. Есть ли способ добавить изображения в таблицу стилей? Я хочу, чтобы изображения изменялись при изменении размера окна, и я не могу это сделать. Как я могу достичь этого?

Спасибо.

Answer 1

Различные способы сделать это:

1. Использование медиа запросов
2. Использование в процентах по ширине и высоте, авто

Answer 2

Изменение стиля может помочь вам

.photo .figure { 
width:100%; 
max-width: 289px; 
} 

Answer 3

I угадайте проблему, когда вы идете на мобильный, так:

@media only screen and (max-width: 480px) { 

    .figure img { 
     width: 100%; 
     height: auto; 
    } 
}