html - 在 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. 将宽度和高度的百分比设置为自动