html - 菜单栏中的图像按钮，如何缩放到页面宽度

Question

我在使用一个网站时遇到问题。老实说，我可能采取了一种完全错误的方法来实现这一目标。

我想要的是我的菜单有五个图像而不是按钮。按钮大小为 200 像素 x 150 像素。我将所有图像放在一个带有 html a href 和 img 标签的 div 中，以实现这一点。它看起来不错，直到您的页面不至少 ~1000px 宽。它会将最后一张图片敲下一行。您可以在这里查看:http://travisbrassfield.com/ .我仍然是一名初级网络开发人员，并决定为 friend 创建一个网站，我出于某种原因使用了 wordpress，我对此并不满意，但现在回去已经太晚了，因为其他一切都已完成。

我试过其中的一些 CSS 和 HTML，我将在下面提供代码。这可能真的是错的，我只是因为它不起作用而变得脾气暴躁，并尝试在这里和那里找到的随机代码片段，看看是否有什么东西可以工作，因为我厌倦了弄乱它。任何帮助将不胜感激。

HTML:

<div class="navigationbar2">
<a href="../index.php"><img src="../img/homeMENU.png" alt="aa" width="200"     height="150"></a>
<a href="../store-offline/"><img src="../img/storeMENU1.png" alt="aa" width="200" height="150"></a>
<a href="../art/"><img src="../img/artMENU.png" alt="aa" width="200" height="150"></a>
<a href="../photos"><img src="../img/photosMENU.png" alt="aa" width="200" height="150"></a>
<a href="../sketches/"><img src="../img/SKETCHmenu.png" alt="aa" width="200" height="150"></a>
<a href="../about/"><img src="../img/aboutMENU.png" alt="aa" width="200" height="150"></a>
</div>

CSS:

.navigationbar2 {
    f
    margin:auto;
    max-height:200px;
    max-width:1600px;
.navigationbar2 img {
    float:left;
    min-width:50%
    min-height:50%
    max-height:100%;
    max-width:100%;
}

Answer 1

这些菜单项图片中的每一个都需要有 200 像素的最大宽度......也许最大宽度为 150 像素只是为了确保它们出现在 ~1000 像素的同一行上