Question

我正在设计一个网页，其中包含指向多个网站的链接。我使用a href标记和网站徽标的图像。当我试图重新调整CSS文件中的图像大小时，没有任何效果。

我做错了什么想法（比如在CSS等中使用错误的标签）？

HTML代码：

 <div id="main">
    <div class="container page">
        <h1>Useful Links</h1>
        <a href="https://pcpartpicker.com/" target="_blank"><img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker"></a>
        <a href="https://www.reddit.com/r/buildapc" target="_blank"><img class="links" src="/pictures/external%20links/reddit.png" alt="Reddit Build a PC"></a>
        <a href="http://www.tomshardware.com/" target="_blank"><img class="links" src="/pictures/external%20links/tomshardwre.png" alt="Tom's Hardware"></a>
        <a href="http://www.cnet.com/forums/pc-hardware/" target="_blank"><img class="links" src="/pictures/external%20links/CNET-Logo.png" alt="Cnet"></a>
        <a href="http://www.pcper.com/" target="_blank"><img class="links" src="/pictures/external%20links/pcper.jpg" alt="PC Perspective"></a>
    </div>    
</div>

CSS代码：

.container a img{
    width: 200;
    height: 200;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.container{
    width: 960px;
    height: auto;
    margin: 0 auto;
}

Answer 1

首先将px添加到img的度量值。

Answer 2

在您的html中，您只需指定自定义高度和宽度

即可

例如，

    <img class="links" src="/pictures/external%20links/images%20(1).jpg" height="200" width="200" alt= "PC Part Picker"></a>

Answer 3

使用以下CSS代码：

.container a img{
    width: 200;
    height: 200;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.container{
    width: 960px;
    height: auto;
    margin: 0 auto;
}

Answer 4

您还没有具体说明图像宽度/高度的测量单位，即px，％等。

如果您要将值添加到图片代码本身，则该200会自动在浏览器中翻译为200px但不会在css中翻译。

所以这可以用200px乘200px

<a href="https://pcpartpicker.com/" target="_blank"><img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker" width="200" height="200"></a>

但在css中必须是：

.container a img{
    width: 200px;
    height: 200px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

现在，如果您希望它们显示在一行中，请删除“display：block”属性。

并且它们不会全部放在同一行上，所以尝试将其减少到大约188px（或19％ - 余量将填充剩余空间），如果这是你想要实现的。

使用CSS调整图像大小

4 个答案: