在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%; 
} 

的圖像寬度和高度300像素。有什麼方法可以在樣式表中添加圖像嗎？我希望在窗口大小發生變化時調整圖像大小，並且我不能做到這一點。我怎樣才能做到這一點？

謝謝。

Answer 1

不同的方式來做到這一點：

1. 使用媒體查詢
寬度和高度設置爲auto
2. 使用百分比

Answer 2

變化樣式可以幫助你

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

Answer 3

我猜測問題發生在你移動時，所以：

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

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